Question

提前感谢您的帮助。

我正在使用以下带有jQuery的David Walsh片段为持久性标题div＃topbar提供支持。但是，我试图弄清楚如何在用户滚动至少100px后才显示标题。

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

$(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();
  }
});

持久标题仅出现在滚动上

1 个答案: