I have a sticky header on a site. But when there is a very specific amount of content below the bottom of the viewport (approximately equal to 2-3x padding-top on my html) the scroll oscillates up and down if one tries to scroll slowly. It works well if there is a large amount of content below the page.
EDIT: Sorry if my original question was insufficiently clear, but I want the entire page to scroll until the 'header' reaches the top of the screen, and then (and only then) have the header stop scrolling while the remainder of the page's content continues to scroll behind it.
Here's a JSfiddle
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true));
} else {
$('#stickyheader').css({
position: 'static',
top: '0px'
});
$('#othercontent').css('margin-top', '0px');
}
});
});
body {
font: 13px sans-serif;
padding-top: 20px;
}
#stickyheader {
width: 100%;
height: 40px;
background:black;
color:white;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stickyheader">Sticky header</div>
<div id="othercontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
If your header row locates on the top of the worksheet, please click View > Freeze Panes > Freeze Top Rows directly. See screenshot. Now the header row is frozen. And it will follow the worksheet up and down while scrolling the worksheet.
Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. Position sticky may not work correctly if any parent element has a set height. Many browsers still do not support sticky positioning. Check out which browsers support position: sticky.
Navigate to Appearance > Customize > Header > Sticky Header from your WordPress Dashboard. Toggle on the Enable sticky header option. Click on Publish.
How to Make position: sticky Work With the overflow Property? By specifying a height on the overflowing container, you should be able to make position: sticky work whilst having the container element have the overflow property set.
You are checking if ($(window).scrollTop() > stickyHeaderTop)
, which allows the header to scroll one pixel up above the screen before running your code to update the CSS, and then the CSS pushes it down.
Also, you are running calculations based on the element that you are modifying, resulting in the jittering. Set your calculated margin first, then perform your edits on the #stickyheader
element:
$(function () {
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= stickyHeaderTop) { // <-- Notice the greater than or equals to.
$('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true)); // <-- This has to be before the #stickyheader changes.
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
} else {
$('#stickyheader').css({
position: 'static',
top: '0px'
});
$('#othercontent').css('margin-top', '0px');
}
});
});
$(function () {
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= stickyHeaderTop) {
$('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true));
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
} else {
$('#stickyheader').css({
position: 'static',
top: '0px'
});
$('#othercontent').css('margin-top', '0px');
}
});
});
body {
font: 13px sans-serif;
padding-top: 20px;
}
#stickyheader {
width: 100%;
height: 40px;
background:black;
color:white;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stickyheader">Sticky header</div>
<div id="othercontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With