CODEWITHSUNDEEP
jqueryhtmlcssscrollonscroll
Harsha M V
Harsha M V

Reputation: 54949

Display Element only when on Scroll

I have a Navaigation bar that i want to get fixed at the top only when the user scrolls the page to about 100px.

Which is the best way to achieve this?

http://play.mink7.com/sophiance/

Upvotes: 2

Views: 6244

Answers (4)

yeyene
yeyene

Reputation: 7380

Working DEMO here...http://jsfiddle.net/eFCK3/1/

HTML

<div id="header-small">Header</div>
<div>
    <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>

CSS

#header-small{
    display:none;background:red;padding:2%;position:fixed;top:0px;width:960%;    
}

$JQUERY

$(window).scroll(function() {
    if ($(this).scrollTop()>100) {
        $('#header-small').fadeIn();
    } else {
        $('#header-small').fadeOut();
    }
});

Upvotes: 4

shammelburg
shammelburg

Reputation: 7318

 $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 100) {

          //when page scrolls past 100px

        } else {

          //when page within 100px

        }
    });

hope this helps

Upvotes: 2

luk2302
luk2302

Reputation: 57134

Add a scroll-Handler using jQuery.
$("html, body").scroll(yourHandler() {});
Then simply check for the scroll-position via
$("html, body").scrollTop();
Determine if that is scrolled as far as you want it to go and then add a css-Class to the navigation bar which adds the fixed-attribute for example or something more complex if you desire.

Don´t forget to remove the class or any other changes you did again if the scrolls back again.

Upvotes: 2

Ramtin Gh
Ramtin Gh

Reputation: 1050

This will stick the navigation top the top of window the moment it reaches the top.Hope it helps.

 var $window = $(window),
           $navigation = $('#navigation'),
           elTop = $navigation.offset().top;

       $window.scroll(function() {
            $navigation.toggleClass('fixed', $window.scrollTop() > elTop);
        });

Upvotes: 1

Related Questions