Question

i am adding a “sticky scroll” nav i think it is called, which allows the nav to move until it hits the top of the browser where it become fixed, i.e. always keeping it in the eye of the user.
I have managed to get it working in chrome, firefox and IE.

However one part of the jquery allows you to change the top margin at which it stops.

Is there anyway i can set the top margin differently for each browser, for example, chrome i want it to be 10px, and IE i want it to be 5px, firefox for some reason takes the whole of the screen with the Nav, so it does not need to be changed.

Here is the Jquery for it

<script type="text/javascript">
    $(function(){ // document ready

      if (!!$('.sticky').offset()) { // make sure ".sticky" element exists

        var stickyTop = $('.sticky').offset().top; // returns number 

        $(window).scroll(function(){ // scroll event

          var windowTop = $(window).scrollTop(); // returns number 

          if (stickyTop < windowTop){
            $('.sticky').css({ position: 'fixed', top: 0 });
          }
          else {
            $('.sticky').css('position','static');
          }

        });

      }

    });
</script>

You can see the top margin section top: 0

Any ideas?

Thanks

Answer 1

IF you want to go this route you can use $.browser (http://api.jquery.com/jQuery.browser/) to test which browser the user is using. This works in most cases, but it could break down if the user has changes the user-agent setting of his browser.

What I suggest you do however is find out why this behavior exist and sold the underlying problem. It you cannot fix it or you have run out of time you can alway fall back to hacks like $.browser. 🙂