10
私はjQueryのに新しいですし、私が行くように自分自身を教えていますが、白のナビゲーションの背景はパネル1の白のナビゲーションテキストを表示するために上に移動スクロールアップその上指示する方法を見つけ出すのに苦労していますか？ナビゲーション遷移
bartaile.comは私がインスピレーションとして使用しているものです&私はバーテイルのナビゲーションに変更を加えています--->ユーザーがスクロールして最初のパネルをスクロールすると、ナビゲーションが非表示になります。もう一度表示すると、パネル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');
\t \t \t
} 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 {
\t border-bottom: 1px solid black;
}'
\t
</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;
\t border-bottom: 1px solid black;
font-size: 48px;
\t height: 200px;
\t width: 100%;
\t
}
.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>
'.addClass'と' .removeClass'を使う代わりに、jQuery '.slideDown'と' .slideUp'メソッドを使うことができます。 – Sam
@Samナビゲーションバーには、スライディング（背景色の変更、テキストの色の変更）以外の他のトランジション要素があります。 – Dee
どのような表示が必要ですか、どのような表示ですか？ユーザーへのフィードバック？ – Simplicity