Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Fixed menu on scroll



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Wagner

avatar
Punbb Rookie
Punbb Rookie


Tutorial: 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..


--> Tutorials, tips and tricks <--
Fixed menu on scroll



- 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);


- 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!





© Wagner


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

Powered by PunBB
Currently 0 users have thanked Wagner for this post:

2
Offline

  Shadow

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

Accepted.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

3
Offline

  Hancki

avatar
Punbb Rookie
Punbb Rookie
@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

Powered by PunBB
Currently 0 users have thanked Hancki for this post:

4
Offline

  Shadow

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

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

5
Offline

  Hancki

avatar
Punbb Rookie
Punbb Rookie
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)

Powered by PunBB
Currently 0 users have thanked Hancki for this post:

6
Offline

  Ethen

avatar
Punbb Rookie
Punbb Rookie
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);

Powered by PunBB
Currently 0 users have thanked Ethen for this post:

7
Offline

  Guest

avatar
Guest
I must say this is a great tutorial!

Powered by PunBB
Currently 0 users have thanked Guest for this post:

8
Offline

  KiNGphx

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

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

9
Offline

  Guest

avatar
Guest
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.

Powered by PunBB
Currently 0 users have thanked Guest for this post:

10
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
i realize that its work thanks Rapid for remind me to re read the code Wink

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

11
Offline

  DaViD-DaViD

avatar
Pemanently Banned
Pemanently Banned
Very Nice, Wagner!

Powered by PunBB
Currently 0 users have thanked DaViD-DaViD for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum