[Javascript] Fixed menu on scroll

This is a tutorial where you gonna learn on how to change the menu state, to fixed on top when the user scroll the page..





1º - Javascript
You just need to configure it

Code:

[panda=js]$(function($){

  var
     //ID of the element you want to affect
      nav = jQuery('#primary_nav'),

      //How much the user need to scroll the page to the element get fixed
      scrollSize = 120,

      //Nothing important..
      Jthis = jQuery(this);

    jQuery(window).scroll(function () {

      if ( Jthis.scrollTop() > scrollSize ) {

        nav.css({
          //CSS styles - To add one more, just do like this 'property':'value' and a comma after, just if aren't the last style attribute
          'position':'fixed',
          'top':'0',
          'left':'0',
          'right':'0',
          'padding':'4px 0',
          'z-index':'9999'
        });

      } else {nav.attr('style','');}

  });

})(jQuery);

2º - Configurations
On our Javascript code, change the "ID of the element you want to affect", to the corresponding element ID.
Change "How much the user need to scroll the page to the element get fixed" to a value you want.
And if you want just put new CSS styles on it..
It's fast and easy! The code is commented to be more easy to configure!

---

If you have any questions related to this topic create a topic with the following title: Fixed menu on scroll

Nicely done Wagner, very simple yet very useful for scrolling navlinks.

Accepted.

@Wagner, I tested it and it doesn't work! :/
But I made a new script:

Code:

jQuery(function($) {
    function fixHancki() {
      var $selectorHancki = $('#pun-navlinks');
      if ($(window).scrollTop() > 100)
        $selectorHancki.css({'position': 'fixed', 'top': '0px'});
      else
        $selectorHancki.css({'position': 'relative', 'top': 'auto'});
    }
    $(window).scroll(fixHancki);
    fixHancki();
});

Hope you like it!

Cheers

That's because you probably didn't change [ic]nav = jQuery('#primary_nav'),[/ic] to [ic]#pun-navlinks[/ic]

Yes, I've changed the selector.
I tested on Google Chrome console and it didn't worked, my code worked.
And in Firefox, allways come with error: http://prntscr.com/2zcw1o (google chrome too)

Code:


(function($) {
$(function($){
  var
    //ID of the element you want to affect
      nav = jQuery('#primary_nav'),
      //How much the user need to scroll the page to the element get fixed
      scrollSize = 120,
      //Nothing important..
      Jthis = jQuery(this);
    jQuery(window).scroll(function () {
      if ( Jthis.scrollTop() > scrollSize ) {
        nav.css({
          //CSS styles - To add one more, just do like this 'property':'value' and a comma after, just if aren't the last style attribute
          'position':'fixed',
          'top':'0',
          'left':'0',
          'right':'0',
          'padding':'4px 0',
          'z-index':'9999'
        });
      } else {nav.attr('style','');}
  });
})(jQuery);

I must say this is a great tutorial!

Not working in Punbb ? Is this Available for all version ?

KiNGphx wrote:[link="/t341-javascript-fixed-menu-on-scroll#2275"]Not working in Punbb ? Is this Available for all version ?

Don't post "Not working", every tutorial is tested before is approved, you have to re-read steps and realize it's not just copy/paste.

Thanks.

i realize that its work thanks Rapid for remind me to re read the code

Very Nice, Wagner!