Question

问题：我正在尝试完成以下动画：当页面在移动设备中加载时，我想显示带有ID＆＃34; sub-header＆＃34;的div但是一旦用户向下滚动超过50px的页面我想要.hide子标题。最后，如果用户在页面上随时向上滚动60px，我希望子标题为.show

我看到的代码如下：该页面隐藏了菜单，但是当我向上滚动时，它会在我停止滚动后显示和隐藏多次。

JQuery的：

 var newScroll = 0;

 var subHeaderPosition = true;

 var currentScroll = 0;

         $(window).scroll(function () {

             currentScroll = $(window).scrollTop();

               if ($(window).width() < 779) {

                       if (currentScroll > 50 && subHeaderPosition) {

                           console.log("Current Scroll position: " + currentScroll);

                            console.log("Scroll should hide");

                            $("#sub-header").hide(300);

                            subHeaderPosition = false;

                            newScroll = $(window).scrollTop();

                            console.log("New Scroll position: " + newScroll);

                       } else if ((currentScroll - 60) < newScroll && !subHeaderPosition) {

                           console.log("Scroll position: " + currentScroll);

                            console.log("Scroll should show Sub-Header");

                            $("#sub-header").show(300);

                            subHeaderPosition = true;

                            newScroll = $(window).scrollTop();

                       } else {

                           newScroll = $(window).scrollTop();
                       }




               }

          });

更新：在添加更多日志之后，我现在可以告诉我，我的newscroll和currentscroll总是以相同的数字结束，这使我指向正确的方向。一旦我拥有它，我会发布一个解决方案，或者如果有人发现它，我会全力以赴。

Answer 1

您可以使用它来解决问题

$(function(){

$(window).on('scroll', function(){

    if($(window).scrollTop() >= 50){
    $('header').addClass('hide');
}
else if($(window).scrollTop() <= 60){
    $('header').removeClass('hide');
}

});

});

https://jsfiddle.net/qummetov_/3hf1e350/

Answer 2

我猜隐藏/显示时间参数存在问题。因此，当隐藏动作完成时，滚动实际上是异步的。

结帐jsfiddle。

我正在使用canShowHeader变量检查此相关性。在我的情况下，我正在运行一个假的setTimeout，但你可以使用原始的jquery hide/show case：

示例：

$( "#book" ).show(300, function() {
  canShowHeader = false;
});

和

$( "#book" ).hide(300, function() {
  canShowHeader = true;
});

希望它有所帮助......

Answer 3

我正在考虑使用addClass和removeClass，正如@НиязиГумметов所说，因为你只能删除并添加一次类。

这样的事情：

var newScroll = 0;

var subHeaderPosition = true;

var currentScroll = 0;

$(window).scroll(function() {

  currentScroll = $(window).scrollTop();


  if (currentScroll > 50 && subHeaderPosition) {

    console.log("Current Scroll position: " + currentScroll);

    console.log("Scroll should hide");

    $("#sub-header").removeClass("show");
    $("#sub-header").addClass("hide");

    subHeaderPosition = false;

    newScroll = $(window).scrollTop();

    console.log("New Scroll position: " + newScroll);

  } else if ((currentScroll - 60) < newScroll && !subHeaderPosition) {

    console.log("Scroll position: " + currentScroll);

    console.log("Scroll should show Sub-Header");

    $("#sub-header").addClass("show");


    subHeaderPosition = true;

    newScroll = $(window).scrollTop();

  } else {

    newScroll = $(window).scrollTop();
  }


});

#sub-header {
  margin-top: 500px;
  transition: all .3s;
  opacity: 1;
  visibility: visible;
}
.hide {
  opacity: 0;
  visibility: hidden;
}
.show {
  opacity: 1 !important;
  visibility: visible !important;
}

或者只提取Underscore Throttle作为nicholaides提及。

根据滚动位置显示/隐藏子标题

3 个答案: