10
jQuery ürününe yeni katılıyorum ve giderken kendimi eğitiyorum ama yukarı doğru ilerlerken beyaz gezinme arka planının panel 1'deki beyaz gezinme metnini gösterecek şekilde nasıl gösterileceğini anlamaya çalışıyorum.Gezinme geçişi
bartaile.com, ilham kaynağı olarak kullanmakta olduğum şeydir & Bartaile'ın navigasyonunda yaptığım değişiklikler ---> Kullanıcı ilk paneli geçtiğinde gezinme gizlendikten sonra, yalnızca kullanıcı yukarı kaydırıldığında gezinme gizlenir tekrar göster, panel 1 geri geldiğinde beyaz gezinme backgrouns gizlemek ve beyaz metni göstermek için yukarı kaydırın.
Bunun nasıl yapılacağını öğrenmek için herhangi bir yardım veya ipucu büyük ölçüde takdir edilecektir! :-)
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>
bu çok daha kolay ile etkiyi elde edebilirsiniz. – Sam
@Sam Nav çubuğu, sadece kayan (arka plan rengi değişimi ve metin rengi değişimi) dışındaki başka geçiş öğelerine sahiptir. – Dee
Yapmanız gereken şey nedir, nasıl bir gösterge? Kullanıcıya geri bildiriminiz var mı? – Simplicity