如何添加类的div滚动顶部和删除的div滚动出？
如何添加类的div滚动顶部和删除的div滚动出？
提问于 2019-03-21 07:15:33
我希望添加'opacity‘类，以列表项，当div的顶部在视口中可见，并删除类，一旦div离开视口，反之亦然
这是pen https://codepen.io/anon/pen/pYOrOV
我对jquery不是很熟悉，所以在这里可能会犯一些愚蠢的错误，但是，它是使用waypoint函数还是更像第二种选择？如有任何建议，将不胜感激，谢谢。
$('.wrapperright').scroll(function () {
if(y >= s_body.top && y < e_body.top){
$('#generationanxiety').addClass('opacity');
}
else
{
$('#generationanxiety').removeClass('opacity');
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-23 08:49:06
使用getBoundingClientRect()检查项目是否在视口中是最简单的。因此，我将其与围绕图像的div上的data属性结合使用，以便将它们与相应li项的id进行匹配。
Demo with explanatory comments
$(window).on('load', function() {
var pouch = $('.wrapperright'),
items = pouch.find('div'),
gate, spot = {},
zone = pouch.scrollTop(),
haze = 'opacity';
$(this).resize(collectInfo).resize();
pouch.scroll(function() {
items.each(function() {
var aim = $('#' + $(this).data('target')),
edges = this.getBoundingClientRect(),
apex = Math.round(edges.top),
nadir = Math.round(edges.bottom);
if (apex < gate && nadir > 0) aim.removeClass(haze);
else aim.addClass(haze);
});
var rise = $('.bio li').not('.' + haze),
turf = pouch.scrollTop();
if (rise.length > 1) {
if (turf > zone) rise.eq(0).addClass(haze);
else rise.eq(1).addClass(haze);
}
zone = turf;
});
$('.bio li').click(function() {
if (zone == spot[this.id]) return;
pouch.stop().animate({scrollTop: spot[this.id]}, 1500);
});
function collectInfo() {
gate = $(this).height();
items.each(function() {
spot[$(this).data('target')] = Math.round($(this).position().top+zone);
});
}
});
$(window).on('load', function() {
var pouch = $('.wrapperright'),
items = pouch.find('div'),
gate, spot = {},
zone = pouch.scrollTop(),
haze = 'opacity';
$(this).resize(collectInfo).resize();
pouch.scroll(function() {
items.each(function() {
var aim = $('#' + $(this).data('target')),
edges = this.getBoundingClientRect(),
apex = Math.round(edges.top),
nadir = Math.round(edges.bottom);
if (apex < gate && nadir > 0) aim.removeClass(haze);
else aim.addClass(haze);
});
var rise = $('.bio li').not('.' + haze),
turf = pouch.scrollTop();
if (rise.length > 1) {
if (turf > zone) rise.eq(0).addClass(haze);
else rise.eq(1).addClass(haze);
}
zone = turf;
});
$('.bio li').click(function() {
if (zone == spot[this.id]) return;
pouch.stop().animate({scrollTop: spot[this.id]}, 1500);
});
function collectInfo() {
gate = $(this).height();
items.each(function() {
spot[$(this).data('target')] = Math.round($(this).position().top+zone);
});
}
});html, body {
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
margin: 0;
grid-gap: 0;
}
.wrapperleft {
grid-column-start: 1;
grid-column-end: 1;
grid-template-rows: auto;
width: 50vw;
max-height: 100%;
overflow: hidden;
margin: 0;
}
.bio {
margin: 20px;
}
.bio ul {
margin-top: 20px;
padding: 0;
}
.bio h1 {
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
margin: 0;
border-bottom: 2px solid #000;
display: inline;
}
.bio ul li {
font-family: sans-serif;
font-weight: 400;
font-size: 3.2em;
list-style: none;
padding-bottom: 10px;
cursor: pointer;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.back {
position: absolute;
bottom: 0;
margin-left: 20px;
}
.back h1 {
font-family: sans-serif;
font-weight: 400;
font-size: 1.5em;
}
.wrapperright {
grid-column-start: 2;
grid-column-end: 2;
grid-template-rows: 200px;
border-left: 2px solid #000;
width: 50vw;
overflow-x: hidden;
overflow-y: auto;
}
.wrapperright img {
width: 50vw;
max-height: 100%;
display: block;
}
.opacity {
opacity: 0.4;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="wrapperleft">
<div class="bio">
<ul>
<li id="generation" class="opacity">01 Generation Anxiety</li>
<li id="lekhena" class="opacity">02 Lekhenaporter.com</li>
<li id="bodys" class="opacity">03 Body(s) Under Negotiation</li>
<li id="glitter" class="opacity">04 Glitter Boy Cosmetics</li>
<li id="juice" class="opacity">05 Juice WRLD Cover Art</li>
</ul>
</div>
<div class="back">
<h1>← Back</h1>
</div>
</div>
<div class="wrapperright">
<img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" alt="image1">
<div data-target="generation">
<img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" alt="image2">
</div>
<div data-target="lekhena">
<img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" alt="image3">
</div>
<div data-target="bodys">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" alt="image4">
</div>
<div data-target="glitter">
<img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" alt="image5">
</div>
<div data-target="juice">
<img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" alt="image6">
</div>
</div>
</div>
列表项的id和匹配的data属性之间的关系相同，我还用它来存储图像在单击之前的滚动位置，以便修复锚点滚动部分。
在一些反馈之后，添加了一些额外的代码，以确保一次只有一个列表项被突出显示，这取决于正在“出现”的图像(通过检查滚动方向)。
我在一定程度上更改了HTML，因为div不是ul的有效子级，而且包装器元素在这里似乎没有必要。最后，一个小的CSS修复来纠正右侧元素的溢出，以及一些创可贴来修复水平溢出问题(vw与桌面浏览器不是非常通用的)。风格有点超出了问题的范围，否则，我只对其进行了最小程度的修改。
Stack Overflow用户
发布于 2019-03-21 07:27:35
也许这个..。
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$(window).scroll(function(){
if($(window).scrollTop() > (topofDiv + height)){
console.log('This is where the div bottom leaves the window.')
$('#generationanxiety').removeClass('opacity');
}
else{
$('#generationanxiety').addClass('opacity');
}
});为了流畅，添加这个额外的CSS代码：
#WrapperDiv{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}到父div
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55271492
复制相关文章
相似问题
腾讯云开发者
