Question

我是jQuery的新手，我正在自学，但我正在努力弄清楚如何指出在向上滚动时白色导航背景向上移动以显示面板1上的白色导航文本？

bartaile.com是我用作灵感的东西。我对bartaile导航所做的更改是---＆gt;在用户滚动浏览导航隐藏的第一个面板后，只有当用户向上滚动时导航才会再次显示，当面板1返回时，白色导航背景会向上滑动以隐藏并显示白色文本。

任何帮助或提示，以了解如何做到这一点将不胜感激！： - ）

var lastScrollTop = 0;
$(window).on('scroll', function() {
    var header = $('.header');
    var stage0 = $('.stage-0');
    var scrollTop = $(window).scrollTop();
    if (scrollTop > lastScrollTop) {
        // down scroll
        if (scrollTop > stage0.offset().top + stage0.height()) {
            header.addClass('hide');
        }
    } else {
        // up scroll
        if (scrollTop <= stage0.offset().top + stage0.height()) {
            header.removeClass('headerBGchange headerLIchange');
			
        } else {
            header.removeClass('hide').addClass('headerBGchange headerLIchange BGupTranistion');
        }
    }
    lastScrollTop = scrollTop;
});

.header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 80px;
    -webkit-transition: top .5s ease;
    transition: top .5s ease;
    position: fixed;
    width: 100%;
    top: 0;
    background-color: transparent;
    overflow: hidden;
}

.header ul {
    margin: 20px;
    padding: 0;
}

.header ul li {
    display: inline-block;
    margin-right: 20px;
    color: white;
}

.header ul li:last-child {
    margin-right: 0;
}

.hide {
    top: -80px;
}

.headerBGchange {
    Background: white;
}

.BGupTranistion {
}

.header.headerLIchange ul li {
    color: Blue;
}

.header.headerLIchange {
	border-bottom: 1px solid black;
}'

	


</style>
<!--stage style--><style>

.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: white;
	border-bottom: 1px solid black;
    font-size: 48px;
	height: 200px;
	width: 100%;
	
}

.stage-0 {
    background: grey;
}

.stage-24 {
    background: #433937;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="header">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>

Answer 1

您需要添加另一个容器才能达到您想要的效果。您基本上想要拥有的是顶部的容器和另一个容器，它将根据您的滚动行为淡入淡出。那么你是如何实现这一目标的？在页面顶部创建一个-Element，就像您目前的灰色框一样。向下滚动时，不要对其进行转换，而是淡入另一个先前隐藏的容器，以便在不在页面顶部时充当导航。现在，如果向上滚动，请检查滚动位置，如果两个容器的两个位置重叠，则开始淡出不在页面顶部时使用的容器。我不认为还有另一种解决方案。我现在可以尝试编写一个codepen，如果我成功的话，我会编辑我的帖子。您也可以尝试使用实际标题和z-index中的另一个div来处理它，尽管这可能会变得非常糟糕。

我已尽力达到你想要的目标。这是CodePen。我使用了两个不同的div，一个名为.dynamic-header和一个普通头，我添加了一个函数来检测jQuery In-Viewport。

$.fn.isOnScreen = function(){
    var element = this.get(0);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}

我希望这符合您的需求。此外，我改变了一些CSS，使用Top-Property进行转换。您可以将所有这些外包到CSS类中并使用它们，但我认为这是用于演示目的的最简单的解决方案。这是你想要的吗？

编辑1 ：您将bartaile.com命名为示例。我看了一下他们创造的效果并重新创建了它。你要做的就是创建一个这样的结构：

<div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li>YOUR HEADER</li>
      </ul>
    </div>

我为此做了另一个CodePen。 header-bg的高度为0. header-content的高度为80px，背景颜色为透明。现在不要检查滚动的方向。效果的唯一重要方面是，您距离顶部/您在视口中的特定元素有多远？我从顶部去了400px。现在，当满足该要求时，只需淡入header-bg。它将位于包装器和内容之间，并将提供背景。与此同时，您也可以更改标题内容的颜色，但我没有这样做。这是bartaile.com所做的，所以你可能想要包含它。享受！

编辑2 ：我根据您的评论编辑了CodePen。在行动here中查看。这样做如下：标题就在那里。向下滚动时，它会消失。在向上滚动时，它会显示背景，但滚动时滚动以及滚动窗口＆lt; 400，背景将淡出。根据我的理解，这就是你想要的。它使用我上面发布的结构。

Answer 2

我查看了“bartaile.com”，我必须指出他们使用的是名为“fullpage”的第三方库。如果你想达到这种效果，你应该查看这个lib {{3} }。这是一个简单易用的插件，用于创建全屏滚动网站（也称为单页网站或单页网站）。它允许创建全屏滚动网站，以及在网站各部分内添加一些风景滑块。

此插件可以处理“全屏滚动”以及正常滚动。你可以通过这个更容易实现你的效果

导航过渡

2 个答案: