javascript - 向上滚动添加标题后滚动平滑过渡

Question

我正在创建一个header：

• 默认显示（透明背景）
• 当用户向下滚动页面（25px）时，它会将header--maroon类添加到header- 它会这样做。该类header-maroon基本上添加了背景颜色和锚样式。
• 但是此时（当用户向下滚动页面 25px 时），我希望header平滑地“淡出”并且在用户向下滚动时基本上保持隐藏状态。
• 最后，当用户向上滚动（10 像素）页面时，我希望header在视点顶部整齐地淡入。

这是我目前的方法。它有点工作，但不像我想要的那么顺利（因为标题刚刚出现，我希望它过渡）。我尝试添加过渡，但它不起作用？

/**********/
/* SCROLL */
/**********/

//Add transition when scrolling down
$(window).scroll(function() {    
  var scroll = $(window).scrollTop();
  if (scroll >= 25) {
      $("header").addClass("header--maroon");
  } else {
      $("header").removeClass("header--maroon");
  }
});

// add scroll effect on page refresh too
$(function() { 
  var scroll = $(window).scrollTop();
  if (scroll >= 10) {
    $(".mainMenu").addClass("header--maroon");
  } else {
    $(".mainMenu").removeClass("header--maroon");
  }
});

/******************************/
/* HIDE HEADER ON SCROLL DOWN */
/******************************/

var didScroll;
var lastScrollTop = 0;
var delta = 25;
var navbarHeight = $('header').outerHeight();

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

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

function hasScrolled() {
    var st = $(this).scrollTop();
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

body{
  background: wheat;
  height:1000px;
}

header {
  position: fixed;
  transition: top 0.2s ease-in-out;
  width: 100%;
  height: 90px;
  background: transparent;
}

.nav-up {
  top: -90px;
  transition: top 0.2s ease-in-out;
}

.header--maroon {
  background: #521717;
  transition: top 0.2s ease-in-out;
}

.mainMenu {
  background-color: transparent;
  width: 100%;
  padding: 10px 0px;
}

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

<header class="nav-down">
  <div class="mainMenu">Link</div>
</header>

<div class="gap"></div>

标签： javascriptjqueryhtmlcss

Answer 1

你可以使用.animate()类。

代替...

$('header').removeClass('nav-down').addClass('nav-up');

和...

$("header").animate({ top: '-90px' },300);

并更换...

$('header').removeClass('nav-up').addClass('nav-down');

和...

$("header").animate({ top: '10px' },300);

这是使用您的代码的 JSFiddle 示例。

请注意，这只是一个粗略的实现。您可以使用它并对其进行调整，直到它按您的意愿工作。