HTML

Question

我有一个导航栏，只有当用户将页面滚动到大约100px时，我才想在顶部修复。

实现这一目标的最佳途径是什么？

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

Answer 1

在这里工作DEMO ...... 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();
    }
});

Answer 2

使用jQuery添加一个scroll-Handler。
$("html, body").scroll(yourHandler() {});
然后只需通过$("html, body").scrollTop();
检查滚动位置确定它是否按照您希望的方式滚动，然后将css-Class添加到导航栏，例如，根据需要添加固定属性或更复杂的内容。

如果再次向后滚动，请不要忘记删除该类或您再次执行的任何其他更改。

Answer 3

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

          //when page scrolls past 100px

        } else {

          //when page within 100px

        }
    });

希望这会有所帮助

Answer 4

当它到达顶部时，这会将导航顶部粘在窗口的顶部。希望它有帮助。

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

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

仅在滚动时显示元素

4 个答案:

HTML

CSS