我只想增加每一段的字体大小,当滚动靠近他们,并减少后,滚动是下降。
null
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.title').css('font-size', '43px');
} else {
$('.title').css('font-size', '36px');
}
});
});
null
在这种情况下,element.getBoundingClientRect
可以帮助您。遍历每个.title
,然后相应地调整大小。
您可以查看CSS转换属性来调整字体大小的速度。
$(document).ready(function () {
$(window).scroll(function(){
$('.title').each(function(){
if (this.getBoundingClientRect().top < 100) {
$(this).css('font-size', '43px');
} else {
$(this).css('font-size', '36px');
}
});
});
$(window).scroll();
});
body{
height: 1000px;
}
.title {
font-size: 36px;
margin-bottom: 100px;
transition: font-size 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">Hello world</div>
<div class="title">Hello world</div>
<div class="title">Hello world</div>
<div class="title">Hello world</div>
<div class="title">Hello world</div>