jquery - 仅在滚动时出现的持久标题

Question

在此先感谢您的帮助。

我正在使用以下带有 jQ​​uery 的 David Walsh 片段来为持久标头 div#topbar 提供动力。但是，我试图弄清楚如何让标题仅在用户滚动至少 100 像素时才显示。

我尝试添加一个窗口侦听器片段，但它基本上破坏了持久标头片段。

$(document).ready(function() {
(function() {
    var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
    var topbarME = function() { $('#topbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#topbar').fadeTo(fadeSpeed,fadeTo); };
    var inside = false;
    $(window).scroll(function() {
        position = $(window).scrollTop();
        if(position > topDistance && !inside) {
            topbarML();
            $('#topbar').bind('mouseenter',topbarME);
            $('#topbar').bind('mouseleave',topbarML);
            inside = true;
        }
        else if (position < topDistance){
            topbarME();
            $('#topbar').unbind('mouseenter',topbarME);
            $('#topbar').unbind('mouseleave',topbarML);
            inside = false;
        }
    });
})();

});

我找到了解决方案。

我用这个替换了那个片段：

jQuery(document).ready(function($) {
var startY= $('#header').position().top + $('#header').outerHeight();
$(window).scroll(function () {
    if($(this).scrollTop() > startY ){
        $('#topbar').slideDown();
    }else{
        $('#topbar').slideUp();
    }
});

});

Answer 1

这是答案：

jQuery(document).ready(function($) {
  var startY= $('#header').position().top + $('#header').outerHeight();
  $(window).scroll(function () {
  if($(this).scrollTop() > startY ){
    $('#topbar').slideDown();
  }else{
    $('#topbar').slideUp();
  }
});