使用粘顶元素在滚动事件上淡出答案

【问题标题】：fadeOut on scroll event using sticky-top element使用粘顶元素在滚动事件上淡出
【发布时间】：2018-10-30 21:25:49
【问题描述】：

我正在使用带有粘性顶部元素的 bootstrap 4.1.3 / jQuery 3.3.1。

向下滚动时，我想隐藏置顶元素（一个 div）
向上滚动时我想显示元素

我现在得到的结果是：

向下滚动fadeOut 循环时会发生fadeIn
当发生 fadeIn 向上滚动时（这就是我想要的）

原型演示：https://terminaladdict.com/ta_skeleton/
我这里只贴了相关代码。

我猜我需要通过fadeOut 中的函数回调以某种方式停止执行？（注意我代码中的注释）

$(document).ready(function(){
     var lastScrollTop = 0;
     $(window).scroll(function () {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                $('.searchBar').fadeOut(function(){ 
                    // do something here to stop fadeIn;
                });
            } else {
                $('.searchBar').fadeIn();
            }
            lastScrollTop = st;
        });
})

<div class="searchBar container-fluid sticky-top p-3 topbar">
  <div class="container">
    <div class="terminalBG d-flex flex-row rounded border p-2 align-items-center">
      <a class="ta_logo d-flex" href="#" data-toggle="tooltip" title="something">
      text
      </a>
      <input type="text" name="query" id="query" placeholder="Search this website ..." class="form-control d-flex" />
    </div>
  </div>

【问题讨论】：

标签： jquery fadein fadeout sticky

【解决方案1】：

我想你可以试试这个方法得到你想要的结果：https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp 它使用 css 转换而不是 jquery，以便在用户执行相反操作时允许取消转换/动画的状态。而不是使用： document.getElementById("navbar").style.top = "0"; 您可以执行以下操作： document.getElementById("navbar").style.opacity = 0;

【讨论】：

该死的！但你让我有了一个新想法：terminaladdict.com/ta_skeleton/2

【解决方案2】：

改为css过渡：

$(document).ready(function(){
     var lastScrollTop = 0;
     $(window).scroll(function () {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                $('.searchBar').addClass('fadeOut');
                $('.searchBar').removeClass('fadeIn');
            } else {
                $('.searchBar').addClass('fadeIn');
                $('.searchBar').removeClass('fadeOut');
            }
            lastScrollTop = st;
        });
});

现在完美运行 .. 不知道为什么 fadeIn 和 fadeOut 不起作用？

【讨论】：