Question

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

在向下滚动时，我想隐藏sticky-top元素（一个div）
在向上滚动时，我要显示元素

我目前的结果是：

当向下滚动衰落循环然后发生fadIn时
发生向上滚动淡入时（这就是我想要的）

原型演示：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，因此如果用户执行相反的操作，则可以取消过渡/动画的状态。而不是使用：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不能正常工作吗？

使用sticky-top元素在滚动事件上淡出

2 个答案: