31 posts
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
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
  • Bought between 100 and 499 items
  • Contributed a Tutorial to a Tuts+ Site
  • Elite Author
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 50 000 and 100 000 dollars
Artillegence says

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

31 posts
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
blingcart says

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

186 posts
  • Bought between 100 and 499 items
  • Contributed a Tutorial to a Tuts+ Site
  • Elite Author
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 50 000 and 100 000 dollars
Artillegence says

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

31 posts
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
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?

3194 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
organicbee says
31 posts
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
blingcart says

http://stickyjs.com

thanks that was easy lol

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

174 posts
  • Sold between 5 000 and 10 000 dollars
  • Most Wanted Bounty Winner
  • Referred between 1 and 9 users
  • Has been a member for 1-2 years
  • Exclusive Author
  • Bought between 10 and 49 items
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
  • Bought between 100 and 499 items
  • Has been a member for 6-7 years
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?

174 posts
  • Sold between 5 000 and 10 000 dollars
  • Most Wanted Bounty Winner
  • Referred between 1 and 9 users
  • Has been a member for 1-2 years
  • Exclusive Author
  • Bought between 10 and 49 items
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