导航过渡

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,就像您目前的灰色框一样.向下滚动时,不要对其进行转换,而是淡入另一个先前隐藏的容器,以便在不在页面顶部时充当导航.现在,如果向上滚动,请检查滚动位置,如果两个容器的两个位置重叠,则开始淡出不在页面顶部时使用的容器.我不认为还有另一种解决方案.我现在可以尝试编写一个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.在这里看到它.这样做如下:标题就在那里.向下滚动时,它会消失.在向上滚动时,它会显示背景,但在滚动以使scrollTop <400时,背景会淡出.根据我的理解,这就是你想要的.它使用我上面发布的结构.