31 posts
  • 7 Years of Membership
  • Collector Level 4
  • United States
blingcart
says

I want my nav bar to sticky to the top as soon as a scroll down passed it. Also if it can show with a slight downward animation.

Anyone know the code for this?

191 posts
  • Elite Author
  • Author Level 8
  • Top Monthly Author
  • Weekly Top Seller
+9 more
Artillegence
says

You can use bootstrap affix feature http://twitter.github.io/bootstrap/javascript.html , easiest way to make it sticky ;)

31 posts
  • 7 Years of Membership
  • Collector Level 4
  • United States
blingcart
says

thanks! do you know if its possible for it to ease in from top and then sticky?

191 posts
  • Elite Author
  • Author Level 8
  • Top Monthly Author
  • Weekly Top Seller
+9 more
Artillegence
says

add .affix-top class in style.css and add width transition that will do it .

31 posts
  • 7 Years of Membership
  • Collector Level 4
  • United States
blingcart
says

I added the js and css bootstraps to my page. called the affix function with javascript and added data-spy=”affix” data-offset-top=”200” to my div but it is not stickying.

anyone know another css or javascript that will sticky a certain div and do a ease down from top effect?

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says
31 posts
  • 7 Years of Membership
  • Collector Level 4
  • United States
blingcart
says

http://stickyjs.com

thanks that was easy lol

now u know any way to make it ease in from top effect?

253 posts
  • Trendsetter
  • Most Wanted Winner
  • Collector Level 2
  • 3 Years of Membership
+2 more
h2theme
says


http://stickyjs.com

thanks that was easy lol

now u know any way to make it ease in from top effect?

I do not like stickyjs , I offer you to use this code.

     jQuery(window).scroll(function () { 
            var SN = $(window).scrollTop();

            if (SN > 190) { 
                if (jQuery('#menu').addClass('fixed')) {
                    return false;
                } 
            } 
            else { 
                jQuery('#menu').removeClass('fixed').stop().attr( { style : '' } );
            }
        } );

With it you can set px from top to show the menu.

For animation use it:

http://daneden.me/animate/

31 posts
  • 7 Years of Membership
  • Collector Level 4
  • United States
blingcart
says



http://stickyjs.com

thanks that was easy lol

now u know any way to make it ease in from top effect?

I do not like stickyjs , I offer you to use this code.

     jQuery(window).scroll(function () { 
            var SN = $(window).scrollTop();

            if (SN > 190) { 
                if (jQuery('#menu').addClass('fixed')) {
                    return false;
                } 
            } 
            else { 
                jQuery('#menu').removeClass('fixed').stop().attr( { style : '' } );
            }
        } );

With it you can set px from top to show the menu.

For animation use it:

http://daneden.me/animate/

I added the javascript to an external js file. anything i need to add to the div i want to sticky and where do i edit the pixel count?

253 posts
  • Trendsetter
  • Most Wanted Winner
  • Collector Level 2
  • 3 Years of Membership
+2 more
h2theme
says

Add this codes to your head.

<script type="text/javascript">
     jQuery(window).scroll(function () { 
            var SN = $(window).scrollTop();

            if (SN > 190) { 
                if (jQuery('#menu').addClass('fixed')) {
                    return false;
                } 
            } 
            else { 
                jQuery('#menu').removeClass('fixed').stop().attr( { style : '' } );
            }
        } );

</script>  

And set your selector instead #menu.If you want to change px from top to show menu, Change 190.

by
by
by
by
by
by