jquery 如何使消失头在消失后有缓慢的过渡

vbopmzt1 于 2023-05-06 发布在 jQuery

关注(0)|答案(2)|浏览(104)

我有一个标题，当用户向下滚动时会消失，当用户向上滚动时会重新出现。我成功地让标题以缓慢的过渡重新出现，但当它消失时，我无法实现相同的过渡。相反，它立即消失，这不是预期的功能。我希望它有一个0.5秒的轻松进出过渡时消失，就像它重新出现时一样。有没有人可以帮我创造出想要的效果？

////Header scroll effect//////

    // Hide Header on on scroll down
    var didScroll;
    var lastScrollTop = 0;
    var delta = 10;
    var navbarHeight = $('header').outerHeight();

    $(window).scroll(function(){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();
        
        // Make sure user scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
        // If user scrolled down and are past the navbar, add class .nav_up.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down Disappear
            $('header').removeClass('header__top').addClass('nav_up');
            $('label').removeClass('menu__btn').addClass('nav_up');
        } else {
            // Scroll Up Reappear
            if(st + $(window).height() < $(document).height()) {
                $('header').removeClass('nav_up').addClass('header__top');
                $('label').removeClass('nav_up').addClass('menu__btn');
            }
        }
        
        lastScrollTop = st;
    }

body{
  height: 30000px;
  background-color: lightblue;
  color: white;
}
.header__top {
  width: 100%;
  height: 120px;
  background-color: #000;
  position: fixed;
  top: 0px;
  z-index: 5;
  border-bottom: 0.02rem solid #000 ;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: top 0.5s ease-in-out;
}
.nav_up { /*---scroll up effect---*/
  top: -120px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header class="header__top">
   <p>header</p>
</header>
</body>

jquery

来源：https://stackoverflow.com/questions/76165554/how-to-make-disappearing-header-have-slow-transition-upon-disappearing

2条答案

按热度按时间

mzillmmw1#

当您从元素中删除类header__top时，它也会删除转换属性。为了避免这种情况，您可以添加目标类，然后将旧类作为回调函数删除：

////Header scroll effect//////

    // Hide Header on on scroll down
    var didScroll;
    var lastScrollTop = 0;
    var delta = 10;
    var navbarHeight = $('header').outerHeight();

    $(window).scroll(function(){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();
        
        // Make sure user scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
        // If user scrolled down and are past the navbar, add class .nav_up.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down Disappear
            $('header').addClass('nav_up',function(){$('header').removeClass('header__top')})
            $('label').removeClass('menu__btn').addClass('nav_up');
        } else {
            // Scroll Up Reappear
            if(st + $(window).height() < $(document).height()) {
                $('header').removeClass('nav_up').addClass('header__top');
                $('label').removeClass('nav_up').addClass('menu__btn');
            }
        }
        
        lastScrollTop = st;
    }

body{
  height: 30000px;
  background-color: lightblue;
  color: white;
}
.header__top {
  width: 100%;
  height: 120px;
  background-color: #000;
  position: fixed;
  top: 0px;
  z-index: 5;
  border-bottom: 0.02rem solid #000 ;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: top 0.5s ease-in-out;
}
.nav_up { /*---scroll up effect---*/
  top: -120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header class="header__top">
   <p>header</p>
</header>
</body>

赞(0）回复(0）举报 2023-05-06

mrfwxfqh2#

我更新了w3schools的演示。使用其他类使元素的transition属性保持不变。从chatGPT复制的向上/向下滚动检测。

const SCROLL_THRESHOLD = 10;

let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;
  const delta = currentScrollY - lastScrollY;

  if (delta > 0 && delta >= SCROLL_THRESHOLD) {
    // The user has scrolled down by at least SCROLL_THRESHOLD pixels
    document.querySelector(".the-header").classList.add("nav_up")

  } else if (delta < 0 && -delta >= SCROLL_THRESHOLD) {
    // The user has scrolled up by at least SCROLL_THRESHOLD pixels
    document.querySelector(".the-header").classList.remove("nav_up")
  }

  lastScrollY = currentScrollY;
});

body {
  height: 3000px;
  background-color: lightblue;
  color: white;
}

.header__top {
  width: 100%;
  height: 120px;
  background-color: #000;
  position: fixed;
  top: 0px;
  z-index: 5;
  border-bottom: 0.02rem solid #000;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.the-header {
  top: 0px;
  transition: top 0.5s ease-in-out;
}

.nav_up {
  /*---scroll up effect---*/
  top: -120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <header class="the-header header__top">
    <p>header</p>
  </header>
</body>

赞(0）回复(0）举报 2023-05-06

我来回答

jquery 如何使消失头在消失后有缓慢的过渡

2条答案

相关问题

热门标签

最新问答