当div出现在屏幕上时,我想转换颜色,当它到达浏览器顶部时,它正在改变。
首先,您可能想使用
.offset().top
instead of
.position().top
为了获得对象与文档顶部的距离,而不是与偏移父对象的距离,以防您在站点上使用的其他CSS产生错误
然后将滚动距离与该值进行比较。这将告诉您对象的顶部何时位于屏幕顶部。
要确定物体何时进入视野,请从物体的高度中减去物体的高度
.offset().top
,并进行比较
值设置为滚动位置。
例如:
if($(document).scrollTop() > $('.slide2').offset().top - $('.slide2').height())
.slide
带金色边框。
我还添加了一个
transition
属性来帮助背景颜色平滑变化,如Lansana所示。
编辑:
.slide1
.变量
slide1offset
已被替换为
hrOffset
hr
标签位于
.homeContainer
我这么做是因为
正如您所问,位于“快速链接”标题的正下方。然后,在CSS中,我更改了
landing
类具有白色背景色。
$(window).on("scroll touchmove", function() {
var homeOffset = $('.homeContainer').offset().top - $('.homeContainer').height();
var hrOffset = $('.homeContainer').find('hr.transGrow').offset().top - $('.homeContainer').find('hr.transGrow').height();
var slide2Offset = $('.slide2').offset().top - $('.slide2').height();
var elms = $('body').add('header');
if ($(document).scrollTop() >= homeOffset) {
setTimeout(function() {
$('.transGrow').addClass('grow');
}, 275);
$(elms).addClass('landing').removeClass('quickLinks');
};
if ($(document).scrollTop() > hrOffset) {
$(elms).addClass('quickLinks').removeClass('landing aboutUs');
};
if ($(document).scrollTop() > slide2Offset) {
$(elms).addClass('aboutUs').removeClass('quickLinks');
};
});
.landing,
.quickLinks,
.aboutUs {
transition: background-color 400ms;
}
.landing {
background-color: #fff;
}
.quickLinks {
background-color: #9575CD;
}
.aboutUs {
background-color: #9CCC65;
}
.slide2 {
border: 2px solid gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homeContainer">
<div class="container-fluid slide slide1 section-basic" id="quickLinks">
<div class="rows">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
<h1 class="text-uppercase text-center heading-basic">Quick Links</h1>
<hr class="transGrow">
</div>
</div>
<div class="rows">
<div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
<a href="#">
<div class="card">
<!--Card image-->
<img class="cards-img-basic img-responsive" src="../images/pdf1.jpg" id="pdf" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title text-center">PDF Books</h4>
<!--Text-->
<p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--/.Card content-->
</div>
</a>
</div>
<div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
<a href="#">
<div class="card">
<!--Card image-->
<img class="cards-img-basic img-responsive" src="../images/receipe1.jpg" id="recipe" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title text-center">Jain Recipes</h4>
<!--Text-->
<p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--/.Card content-->
</div>
</a>
</div>
<div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
<a href="#">
<div class="card">
<!--Card image-->
<img class="cards-img-basic img-responsive" src="../images/panchang1.jpg" id="panchang" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title text-center">Jain Panchang</h4>
<!--Text-->
<p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--/.Card content-->
</div>
</a>
</div>
<div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
<a href="#">
<div class="card">
<!--Card image-->
<img class="cards-img-basic img-responsive" src="../images/czone1.jpg" id="czone" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title text-center">Children Zone</h4>
<!--Text-->
<p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--/.Card content-->
</div>
</a>
</div>
<div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
<a href="#">
<div class="card">
<!--Card image-->
<img class="cards-img-basic img-responsive" src="../images/puja1.jpg" id="pooja" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title text-center">Pooja Pujans</h4>
<!--Text-->
<p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--/.Card content-->
</div>
</a>
</div>
<div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
<a href="#">
<div class="card">
<!--Card image-->
<img class="cards-img-basic img-responsive" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title text-center">Religious Sutras</h4>
<!--Text-->
<p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--/.Card content-->
</div>
</a>
</div>
</div>
</div>
<div class="container-fluid slide slide2 section-basic" data-color="#ef9a9a">
<div class="rows">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
<h1 class="text-uppercase text-center heading-basic">About Us</h1>
<hr>
</div>
</div>
<div class="rows">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 padding-basic" data-aos="fade-right">
<img src="../images/homepage.jpg" class="img-responsive">
</div>
<div class="scrollable-cover col-lg-6 col-md-6 col-sm-12 col-xs-12 padding-basic" data-aos="fade-left">
<div class="simplebar-content scrollable-basic" data-scrollbar>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim,
venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque
auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna
dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim,
venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque
auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna
dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
</div>
</div>
</div>
</div>
</div>
