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

【问题标题】：Show/Hide Sub-Header based on Scroll position根据滚动位置显示/隐藏子标题
【发布时间】：2016-11-29 04:57:11
【问题描述】：

问题：我正在尝试完成以下动画：当页面在移动设备中加载时，我想显示 ID 为“子标题”的 div，但只要用户滚动超过我想隐藏子标题的页面向下 50px。最后，如果用户在页面上随时向上滚动 60 像素，我希望子标题显示为 .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();
                       }




               }

          });

更新：添加更多日志后，我现在可以看出我的新闻滚动和当前滚动总是以相同的数字结束，这为我指明了正确的方向。一旦我有了它，我会发布一个解决方案，或者如果有人发现它，我会全神贯注。

【问题讨论】：

标签： javascript jquery html css

【解决方案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/

【讨论】：

不幸的是，我希望“标题显示用户是否开始向上滚动，而不仅仅是在他们到达页面顶部时。

【解决方案2】：

我猜隐藏/显示时间参数有问题。正因为如此，虽然隐藏动作可以完成，但滚动实际上是异步执行的。

结帐jsfiddle。

我正在使用canShowHeader 变量检查此正确性。就我而言，我正在运行一个假的 setTimeout，但您可以使用原始的 jquery hide/show case：

例子：

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

和

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

希望对你有帮助...

【讨论】：

【解决方案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。

【讨论】：