Here is a sample where I take the affix for the right sidebar (unfortunately, Bootstrap 4 hasn't true affixes) - Violy Theme Right Sidebar Sample
I see that sticky behavior made by this style:
.sidebar {
border-radius: 20px;
padding: 25px 25px;
position: sticky;
position: -webkit-sticky;
top: 0;
}
So, when I duplicate sticky behavior in CSS for my page here - nothing happened, right sidebar scrolled with text :-(
What's wrong?
Guess, written text is not enough to provide a clear answer, so, please look into browser Developer Tools for these pages to inspect styles and elements.
That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.
In fact, in your site I found that its parent element:
<header id="head_page">...</header>
<section class="wrapper>
<!--- here we find the sidebar -->
</section>
<footer id="footer>...<footer>
has a overflow: hidden; property and when I disabled it the property of position: sticky; started working again.
UPDATE: Please see #despotes quick fix, that preserves the use of sticky positioning on the page.
I will leave my fixed positioning solution as a reference for future users.
Using fixed positioning that is more evenly supported:
CSS
.sidebar {
position:fixed;
top:425px;
}
jQuery
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > XX) { //value to be determined
$('.sidebar').css('top','25';
}
if ($(document).scrollTop() < XX) { // same value but add 1
$('.sidebar').css('top','425';
}
});
});
So basically once the user scrolls past XX, the sidebar will sit 25px below the top of the screen and when under XX it will sit at 425px from the top. Could be edited with more trigger points for smoother effect.
Related
I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible
I tried using position: fixed , flex
But none of them worked
footer
{
margin-bottom:0px;
background-color: black;
background-color:rgb(11,132,69);
color: white;
}
<footer class="container-fluid text-center">
Some text
</footer>
you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:
CSS
position: fixed;
left: 0;
bottom: 0;
One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)
Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.
Code Playground Example
I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.
Demo
One Small Note
position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed.
- position: sticky is currently experimental and not supported in IE.
You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.
footer {
position: fixed;
bottom: 0;
}
I am building a website for my upcoming wedding and I want a sticky header, but for some reason, it "disappears" by moving up after you go a certain way down the page. My test url is this: https://betterradiotech.com. Here is the nav markup:
<!-- Start Nav -->
<header>
<nav>
<ul class="nav-list">
<li>Home</li>
<li>Music</li>
<li>Gallery</li>
<li>Feed</li>
</ul>
</nav>
</header> <!--/ End Nav -->
Here is the nav SCSS:
header {
padding: 1em;
position: sticky;
top: 0;
z-index: 100;
width: 100%;
background-color: $burgandy;
}
.nav-list {
display: flex;
flex-flow: row nowrap;
li {
list-style-type: none;
margin-left: 10px;
}
a {
color: $pink;
font-weight: 600;
}
}
.active-nav {color: $navy !important;}
There is no JavaScript in making the nav, except for making the active nav work...for completeness sake, I will include that as well:
switch(location.pathname) {
case "/":
document.querySelector("a[title*='Home']").classList.add("active-nav");
break;
case "/admin/":
document.querySelector("a[title*='Admin']").classList.add("active-nav");
break;
case "/feed/":
document.querySelector("a[title*='Feed']").classList.add("active-nav");
break;
case "/gallery/":
document.querySelector("a[title*='Gallery']").classList.add("active-nav");
break;
case "/music/":
document.querySelector("a[title*='Music']").classList.add("active-nav");
break;
}
Why is my nav bar disappearing after a certain distance down the page? It seems to happen right before the end of the full background picture in the first section.
The reason for this is probably that your containing element is not as tall as you think, and you may have to set that element's height to fit-content explicitly, because sticky elements cannot leave their parent!
In most situations, the simplest solution will be to add this rule to your CSS:
body {
height: fit-content;
}
But generally, which solution you need and which element you have to apply it to depends on your document structure. Let's say it looks something like this:
<body>
<header>
<nav>
<!-- Your navigation -->
</nav>
</header>
<main>
<!-- The main content of the site -->
</main>
</body>
And you probably use some CSS reset that contains a rule like this one:
html, body {
height: 100%;
}
This allows using percentage heights on your page, but it will break sticky headers without additional work.
When you look at the size of the body with the dev tools, everything may look alright:
But once you scroll down, you see a problem:
The body is just as tall as your viewport. All other content you see is just overflowing out of it. But a sticky header can't do that, it will stay within the body and disappear with it. We now have three potential solutions:
If you don't need percentage-based heights on your page, you can use this CSS rule:
body {
height: fit-content;
}
If there are some percentage-base heights, try replacing them with vh instead, and see if that works for you. Then you can apply the fix from above.
If you do need percentage-based heights, then you might want to make the body stay in place but scroll the overflowing content through it:
html {
overflow: hidden;
}
body {
overflow: scroll;
}
I think you'll get the desired behavior by switching from sticky to fixed. Sticky is sort of a hybrid of fixed and relative positioning, and changes its behavior relative to context, and is commonly used to allow items to respond to its neighbors via scroll position.
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
So you want:
header {
position: fixed;
}
PS: The reason its disappearing for you is that your body has a computed height, but the contents of the body overflow beyond that height. The sticky element scrolls away once you scroll past the computed height of the body, which is the header's parent.
The previous soultions did not work for my situation.
position: fixed made the other elements hide beneath it. And adding margin top or top to them messed the header a little bit. After almost two days of banging my head against the wall, I ended up adding this css to my modal in my styles.scss:
.modal-class{
display: initial;
}
This worked for me, hopefully helps save someone else's time.
I want to achieve this example but with the difference that in case there is too much content on my page (between navbar and footer) that this content is down-scaled / squeezed to fit inside (i.e. so that the footer is still visible at all screen resolutions, making it a "fixed footer" in CSS jargon). I'm using bootstrap 3.1.1 and it would be cool if anyone has a solution that is bootstrap-friendly :). Best!
You could always go with a fixed footer and have any additional content scroll underneath it.
Heres a jsfiddle as an example:
html {
min-height: 100%;
position: relative;
}
body {
margin-bottom: 1.5rem /* or whatever your fixed footer height is */
}
/* and assuming your footer has id="footer" */
#footer {
position: fixed;
bottom: 0;
height: 1.5rem;
overflow: hidden;
}
Please see this answer here, and the example it refers to here. It's going to be a bit different I assume if you've got pictures and everything though. If you could provide an example of your content on jsFiddle we could probably help you scale it a little better.
I've been trying to layout this page, but for the life of me, can't seem to get it to work the way I want.
Window = black
Titlebar = red
Content div = blue
Vertical scrollbar = green
Horizontal scrollbar = yellow
Min titlebar/content div width of 1024px, growing to window size.
I may be completely overthinking it and the answer may be way simpler than I'm attempting.
Basically I want to have a fixed titlebar div at the top of the page that never scrolls vertically. If it does not fit in the window horizontally, I want the horizontal scrollbar to scroll both the titlebar and content. If the content div is taller than the window height, I want it to scroll, otherwise I want it to extend to the bottom of the page.
For the most part, I'm under next to no restrictions on how these divs may be set, so imagine there is a blank slate.
Needs to work on modern browsers only on recent OSes. Ideally only a CSS/HTML fix, but will consider some JS if absolutely required. Needs visible scrollbars (some versions I tried the scrollbars were off outside the window scope, ie, not just mousewheel scroll, but click and drag scroll).
I have to edit my answer, because after reading Lokesh Suthar's answer I finally understood your question! ;-)
There is no CSS solution!
You'll find the reason in the spec (http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning):
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled.
So you have to go with a JS solution like the one Lokesh Suthar has linked to in his answer.
A personal note:
Normally web designer try to avoid horizontal scrollbars at all costs!
They are "bad" for usability and most users hate to scroll horizontally.
And instead of making a fixed positioned element wider than the viewport you should expand its height.
Remember: Using a JS solution on this will make content unreachable/ not visible if JS is disabled!
Pure CSS Solution.
Here's my updated answer. Please check.
Demo link below:
Fiddle
HTML
<div id="title-bar">Title Bar</div>
<div id="content">Contents</div>
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
#title-bar, #content {
min-width:1024px;
width:100%;
}
#title-bar {
position:fixed;
top:0;
background:#CC0000;
height:50px;
color:#fff;
}
#content {
top:50px;
position:relative;
background:#9EC2E3;
height:calc(100% - 50px);
overflow:auto;
}
Just let me know if you have concerns.
I think this may work for you...
Working Example
JS:
$(window).scroll(function () { // on scroll
var win = $(window);
var title = $('.title');
var winWidth = $(window).innerWidth();
var titleWidth = title.width();
if (win.scrollLeft() >= titleWidth - winWidth) { // if scrolled to the right further than .title is wide minus the window's width
title.addClass('fixed'); // add the fixed class
title.offset({ //keep the title bar at the top
top: win.scrollTop(),
});
} else { // if not
title.removeClass('fixed'); // removed class fixed
title.offset({ // keep the title bar at the top anyway
top: win.scrollTop(),
});
}
});
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 1024px;
height:100%
}
.title {
background:red;
position: absolute;
z-index:2;
min-width: 100%;
}
#content {
background: blue;
padding-top:50px;
min-width:1024px;
min-height:100%;
}
.fixed {
position: fixed;
right: 0;
}
API documentation:
.scroll()
.innerWidth()
.width()
.scrollLeft()
.offset()
.addClass()
.removeClass()
With CSS:
In short, it is not possible with position: fixed;.
As already mentioned by other answers, it is not possible to force a fixed div to scroll, because the div becomes positioned in relation to the viewport (thanks #Netsurfer for digging up the link), and there is no way for us to manipulate this.
Alternative 1: You could set overflow of the body to hidden (thereby hiding browser scrollbars) and add a new wrapper div that fills the entire viewport by using viewport units (vh and vw). You would then nest your titlebar and content divs within this wrapper and give it a horizontal scrollbar. Then you would absolutely position your titlebar in relation to a new titlebar wrapper div, while wrapping your content in a div with 100% (minus the titlebar) height and a vertical scrollbar.
See jsfiddle example.
This approach is rather ugly when you consider all the wrappers... also, when you apply a min-width of 1024 pixels to the content, the vertical scrollbar will move out of the viewport when viewed on smaller screens (as you mentioned in your post). You could position the scrollbar on the left side using direction: rtl;, but the scrollbar will still go out of view when scrolling to the right.
See jsfiddle example with scrollbar on left.
All in all it is not a great solution which would need to be heavily tested for cross-browser support any time anything is changed. Currently it works in Chrome 33 (which I am using) and I have also succesfully tested it in Firefox 27, Internet Explorer 11 and Opera 19. Safari 5.1 (windows) does not like it, but it should work on the newer Mac versions. For Safari 5.1 you can try changing to % heights and dropping the css calc() method, but you'll probably have problems scrolling the entire content.
Alternative 2: Wait. In the future you may be able to use position: sticky; to achieve exactly what you want (assuming this new property ever gains complete browser support). You can see it in action with chrome if you enable the "Enable experimental Web Platform features" option under "chrome://flags/".
See jsfiddle example.
With jQuery:
With jQuery this becomes a trivial task if you forget about position: fixed;, and does not require much code. All you would have to do is position the titlebar div absolutely and then tell it to move every time the window is scrolled:
$window.scroll(function() {
$(".title").css('top', $window.scrollTop() + "px");
});
Using .css() is slightly faster than using .offset() (see benchmark tests).
If JS is disabled the titlebar will simply scroll out of view.
See jsfiddle example.
Considering how easy this is with jQuery, I would suggest using that approach.
I think this should answer your query.
CLICK ME
Basically the fellow is trying moving the fixed nav with scroll events(playing with left property as he says)
I used position absolute to set height in percentage.
like for titlebar ,
position:fixed;
height:6%;
you can remove wrapper if you don't want to use,
Click for demo
Let me know more if it need some changes
You have to use a combination of CSS and JavaScript. As the others stated, a fixed element does not scroll and you cannot choose that it should scroll horizontally but not vertically. So there comes the JS.
This is the shortest form I could think of. This should work on mobile devices, too. It works with a inner div in the fixed element, which is positioned absolute and reacts to the windows scroll event.
Here is the codepen example: http://codepen.io/HerrSerker/pen/AJHyf
This just works with a fixed height header. If your header is not fixed in height, you have to add some JavaScript, that measures the height of the header and adds
HTML
<div id="maker"></div>
<header><div id="header_inner">Lorem ipsum dolor sit amet.</div></header>
<main><div id="#main_inner">Lorem ipsum dolor sit amet ...</div></main>
CSS
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
overflow: auto;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#maker {
width: 1024px;
height: 1px;
margin-top: -1px;
background: red;
}
header {
position: fixed;
min-width: 1024px;
background: black;
color:white;
width: 100%;
height: 50px;
}
#header_inner {
padding: 10px;
}
main {
padding: 0px;
padding-top: 50px;
min-height: 100%;
min-width: 1024px;
background: gold;
color: brown;
}
#main_inner {
padding: 20px;
}
JavaScript
(function() {
var headerInner = document.getElementById('header_inner');
headerInner.style.position = 'absolute';
var scrollReact = function() {
headerInner.style.left = '-'+self.pageXOffset+'px';
}
if ('addEventListener' in self) {
self.addEventListener('scroll', scrollReact);
} else if (typeof self.attachEvent == 'function') {
self.attachEvent('scroll', scrollReact );
}
}())
How to prevent a div with position: fixed to stay in the outer div and prevent it from overlapping to the footer of the website.
For example, I have a div, and I want to scroll the div within the content div between the header and footer sections and not move from the div outside the content.
My code for this:
HTML
<div id="fixed_div"></div>
CSS
#fixed_div {
background: none repeat scroll 0 0 #F1F1F1;
padding: 10px;
position: fixed;
width: 290px;
z-index: 99;
}
There is a plugin for jQuery called Waypoints. It allows you to detect when an element has been scrolled to. http://imakewebthings.com/jquery-waypoints/
$('.footer').waypoint(function(direction) {
$('#fixed_div').hide();
});
Its API is quite helpful and should be able to suit your needs.
You can use overflow:scroll. If your content get overflowed from inner div it get scroll automatically.