CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Manu Zi
Manu Zi

Reputation: 2370

Sticky Header jumps on scroll down

I have a strange problem . I wanted to build me a sticky head . On the internet I have found some instances also run, now I have so far implemented in my site. Now it is so that when I come through the peak , where the " fixed" position is set then the content jumps.

This is my javascript:

$(window).scroll(function()
{
  // This is the value from which the content (gridViewTop) should be sticked
  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 thing: i take the value (objectheight) because i want that on mobile devices too, and there it is possible that the user expand the menu and then the value is bigger then default.

(It is possible to use this on mobile devices?)

Here a fiddle: http://jsfiddle.net/vjb1ag27/

But i want a smove scrolling.

Any suggestions?

Thanks

Upvotes: 0

Views: 2990

Answers (2)

jilykate
jilykate

Reputation: 6018

This might not work on mobile devices since the "scroll" event will only be fired once after scrolling stopped completely on the mobile device. So it will be a little 'jumpy'. What you need is a third-party library to handle scrolling events such as iscroll

Upvotes: 0

carlodurso
carlodurso

Reputation: 2894

Actually, there's a little jump due to the margin applied to the p tag.

Therefore, when you call if( $(window).scrollTop() > objectheight is 40 pixels, but indeed there's a 10px gap that cause that jump.

You can either reduce the p margin via css or assign that margin value to objectheight.

http://jsfiddle.net/carlodurso/vjb1ag27/1/

Upvotes: 2

Related Questions