31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
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?

186 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 100+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
Artillegence says

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

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

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

186 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 100+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
Artillegence says

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

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
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?

3225 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says
31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

http://stickyjs.com

thanks that was easy lol

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

195 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Won a Most Wanted contest
+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
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
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?

195 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Won a Most Wanted contest
+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