-1
一個項目我已經做了小提琴here淡入和淡出DIV當滾動在視口中
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
//show phone triggering at height 150px from 1st DIV
$(window).scroll(function() {
console.log($(window).scrollTop());
var topDivHeight = $("#first").height();
var viewPortSize = $(window).height();
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
if($(window).scrollTop() >= triggerHeight) {
$('.phone').css('visibility', 'visible').hide().fadeIn();
$(this).off('scroll');
}
});#first {
height: 100vh;
background: #F06A59;
}
#second {
height: 100vh;
background: #FB3E47;
}
#third {
height: 100vh;
background: #FFA306;
}
#fourth {
height: 100vh;
background: #528AFC;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#sixth {
height: 100vh;
background: #CFDA25;
}
.header {
width: 100%;
position: absolute;
padding: 20px
}
.nav {
position: fixed;
width: 100%;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
font-size: 18px;
margin-bottom: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
text-decoration: none;
color: #000;
padding: 10px 5px 10px 70px;
font-family: agency fb;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 2px 4px #000000;
}
.nav ul li a:hover {
color: #fff;
text-shadow: 1px 6px 4px #000000;
transition: all 0.4s ease-in-out;
}
.nav-active {
color: red !important;
}
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: block;
visibility: hidden;
}
.phone-inner {
width: 200px;
height: 355px;
border: 1px solid #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="nav">
<ul id="navlist">
<li><a href="#first" id="nav1">Home</a></li>
<li><a href="#second" id="nav2">Features</a></li>
<li><a href="#third" id="nav3">About Us</a></li>
</ul>
</div>
<div class="phone" align="center">
<div class="phone-inner"></div>
</div>
</div>
<section>
<div class="main" id="first">
<video width="100%" autoplay="" loop="" muted>
<source src="vid/vids.mp4" type="video/mp4">
</video>
</div>
</section>
<section>
<div class="main" id="second"> </div>
</section>
<section>
<div class="main" id="third"></div>
</section>在那裏，你可以看到，當我向下滾動，手機會顯示在觸發高度150px。這就是我想這麼好，直到這裏。但是當我回滾到第一個div時，它應該淡出並隱藏起來。我試圖去做，但失敗了。我想讓它在第一個和最後一個div中都沒有顯示（它應該只顯示在中間的div中）。比如說我有五個部門。它應該像現在這樣開始顯示，並且應該在第四格之前可見。一旦第五個div進入視口，它應該淡出並隱藏起來。同樣，當我滾動回第一個div時，它應該淡出並再次隱藏，然後在向上滾動並向下滾動時重複該過程。
請幫我開發。您正在使用此$(this).off('scroll')
可以更新'的jsfiddle link' –
小提琴鏈接會出現問題。它不開放。 – KiranPurbey
你可以只是簡單地複製和粘貼它...... –