【问题标题】：Display Element only when on Scroll仅在滚动时显示元素
【发布时间】：2013-06-01 13:13:17
【问题描述】：

我有一个导航栏，我希望仅当用户将页面滚动到大约 100 像素时才将其固定在顶部。

实现这一目标的最佳方法是什么？

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

【问题讨论】：

最好的方法是搜索粘性导航栏
@roasted 我创建了粘性条。但希望它只在滚动后出现

标签： jquery html css scroll onscroll

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

          //when page scrolls past 100px

        } else {

          //when page within 100px

        }
    });

希望对你有帮助

【讨论】：

【解决方案3】：

使用 jQuery 添加滚动处理程序。
$("html, body").scroll(yourHandler() {});
然后只需通过
$("html, body").scrollTop();
检查滚动位置确定是否将其滚动到您想要的位置，然后将 css-Class 添加到导航栏，例如添加固定属性或根据需要更复杂的属性。

如果再次滚动，请不要忘记删除类或您所做的任何其他更改。

【讨论】：

【解决方案4】：

这将在导航到达顶部时将导航贴在窗口顶部。希望对您有所帮助。

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

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

【讨论】：

我应该在哪里设置 100px ？
您只需将导航放置在您想要的位置，它可以与顶部的任何距离，在这种情况下为 100，然后将上述代码放入您的脚本中，当它到达那里时它会自动粘在顶部。