首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用粘性顶部元素的滚动事件上的fadeOut

使用粘性顶部元素的滚动事件上的fadeOut
EN

Stack Overflow用户
提问于 2018-10-31 05:25:49
回答 2查看 313关注 0票数 1

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

  • 在向下滚动时我想隐藏顶部粘滞的元素(a Div)
  • 在向上滚动时我想显示element

目前我得到的结果是:

当向下滚动循环时

  • fadeOut fadeIn
  • 当向上滚动时发生fadeIn (这就是我想要的)

原型演示:https://terminaladdict.com/ta_skeleton/

我只是在这里发布了相关的代码。

我猜我需要用fadeOut中的函数回调来停止执行?(注意我代码中的注释)

代码语言:javascript
复制
$(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;
        });
})
代码语言:javascript
复制
<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>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-31 07:03:35

更改为css过渡:

代码语言:javascript
复制
$(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不能工作?

票数 0
EN

Stack Overflow用户

发布于 2018-10-31 06:03:27

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53073145

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档