-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
你可以只是简单地复制和粘贴它...... –