1

I'm using jQuery-1.10.2 and I am using the function $(window).scroll. The $(window).scroll isn't being executed as I scroll on a mobile device, but rather when my finger releases the screen after scrolling. $(window).scroll is also delayed on IE10.

I use $(window).scroll to make a navbar scroll with the page by changing the css property top: on the position:fixed; navbar. When scrolled down for enough, the navbar ends up sticking to the top of the page as position:fixed. Is there a more compatible alternative to achieve the same results to my navbar? Is there a fix for mobile or IE10?

$(window).scroll(function () {
    $('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
    var scroll = $(document).scrollTop();
});

Here is a fiddle with no images. Look at the navbar. http://jsfiddle.net/93tzq/

Brett Merrifield
  • 2,220
  • 6
  • 22
  • 21

2 Answers2

0

If I'm understanding what you want to do correctly I'm pretty sure you're over thinking this.To keep a nav element at top while you scroll you don't need any js. All you need to do is set the z-index and position accordingly.

For instance:

.nav-overlay{

position: absolute;
top: 90px;
left: 10%;
z-index: 100;
display: block;
width: 50px;
height: 50px;
}

Then put the html as follow:

<nav class='nav-overlay'>
NAV BAR HERE
</nav>
Joe Komputer
  • 1,325
  • 3
  • 12
  • 25
0

You didn't specify your mobile browser, but this is a common question with Safari in iOS. MobileSafari does not trigger window.scroll until the scrolling has finished – this has been a problem addressed numerous ways (see iscroll, for example). Here's a similar post that may answer your question as far as making a sticky navbar.

Community
  • 1
  • 1
Ben Saufley
  • 3,259
  • 5
  • 27
  • 42