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

Question

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

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

我现在得到的结果是：

向下滚动 fadeOut 循环时会发生 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>

Answer 1

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

Answer 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 不工作？

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

fadeOut on scroll event using sticky-top element

jquery

sticky

fadeout

fadein