Jquery 仅在滚动时显示元素

我有一个导航条，只有当用户将页面滚动到大约100px时，我才想固定在顶部

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

---

这将在导航到达窗口顶部时将其粘贴到窗口顶部。希望有帮助

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

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

---

使用jQuery添加滚动处理程序

$（“html，body”）.scroll（yourHandler（）{}）

然后通过
$（“html，body”）.scrollTop（）检查滚动位置

确定它是否滚动到您想要的范围，然后向导航栏添加一个css类，该类会添加固定属性，例如，或者根据需要添加更复杂的内容

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

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

          //when page scrolls past 100px

        } else {

          //when page within 100px

        }
    });

希望这有助于这里的工作演示

HTML
$JQUERY

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

最好的方法是搜索粘性导航bar@roasted我已经创建了粘滞条。但是想要它只在滚动后出现，我应该在哪里设置100px？你只要把你的导航放在你想要的地方，它可以在任何距离顶部，在这种情况下是100，然后把上面的代码放在你的脚本中，当它到达那里时，它会自动粘到顶部。
#header-small{
    display:none;background:red;padding:2%;position:fixed;top:0px;width:960%;    
}

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