Question

我正在创建一个header，其中：

默认显示（透明背景）
当用户向下滚动页面（25像素）时，它将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>

Answer 1

尝试执行此操作： JSFiddle

HTML：

<header class="nav-down">
    This is your menu.
</header>
<main>
    This is your body.
</main>
<footer>
    This is your footer.
</footer>

CSS：

body {
    padding-top: 40px;
}

header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up {
    top: -40px;
}

main {
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=) repeat;
    height: 2000px;
}

footer { background: #ddd;}
* { color: transparent}

JS：

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

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

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

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    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;
}

（**此代码的功劳归JSFiddle的创建者所有）

希望这会有所帮助！

Answer 2

您可以使用.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);

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

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

在向上滚动后添加标题后，滚动上的平滑过渡

2 个答案: