I seem to be encountering a peculiar issue. I decided to create a sticky header for myself. After doing some research online, I found some examples and managed to implement it on my website. However, I've noticed that when the page reaches a certain point where the "fixed" position is applied, the content jumps.
Below is the JavaScript code I am using:
$(window).scroll(function()
{
// This is the height from which the content (gridViewTop) should be stuck
var objectheight = $('header').height();
if( $(window).scrollTop() > objectheight )
{
$('#gridViewTop').css({position: 'fixed'});
$('#gridViewTopPH').css({display: 'block'});
}
else
{
$('#gridViewTop').css({position: 'static', top: '0'});
$('#gridViewTopPH').css({display: 'none'});
}
});
One important detail: I'm using the value (objectheight) to ensure compatibility with mobile devices. On mobile devices, users may expand the menu, causing the value to exceed the default height.
(Is this method suitable for mobile devices as well?)
Here's a link to a fiddle showcasing the issue: http://jsfiddle.net/vjb1ag27/
However, I would like to achieve smooth scrolling.
Any suggestions or advice would be greatly appreciated.
Thank you.