导航过渡

Question

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

bartaile.com是我所使用的灵感&我对bartaile的导航所做的更改是-->在用户滚动到第一个面板之后导航隐藏，只有当用户滚动导航显示时，当面板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，就像您的灰色框现在就在那里一样。当滚动时，不要转换它，相反，在另一个以前隐藏的容器中淡出，在不位于页面顶部时充当您的导航。现在，如果回滚，检查滚动位置，如果两个容器的两个位置重叠，则在页面顶部时开始褪色您使用的容器。我认为没有另一种解决办法。我现在可以试着写一个代码，如果我成功的话，我会编辑我的帖子。您也可以尝试使用实际标题和z索引中的另一个div来解决这个问题，尽管结果可能会非常糟糕。

我已经尽了最大的努力去实现你想要的。这是CodePen。我使用了两个不同的div，一个是..dynamic头，另一个是普通头，我还添加了一个函数来检测jQuery In-Viewport。

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

我希望这能满足你的需要。另外，我还更改了一些CSS，使用顶层属性进行转换。您可以将所有这些外包到CSS类中，然后使用它们，但我认为这是最简单的演示解决方案。这是你想要的吗？

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

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

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

编辑2：我根据你的评论编辑了CodePen。在行动中看到它这里。这样做的目的是:有一个标题。向下滚动，它就会消失。在向上滚动时，它会显示一个背景，但是当滚动使scrollTop < 400时，背景就会淡出。据我所知，这就是你想要的。它使用了我上面发布的结构。

Answer 2

我查看了"bartaile.com“，我必须指出，他们使用的是一个第三方库，称为‘this页面’，如果您想要实现这种效果，应该查看这个lib fullpage.js。这是一个简单，易于使用插件，以创建全屏滚动网站(也称为单页网站或漏电网站)。它允许创建全屏滚动网站，以及添加一些景观滑块在网站的部分。

这个插件可以处理“全屏滚动”，也可以正常滚动。这样你就能更容易地达到你的效果