jQuery 当它滚动到视口时淡入 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23180375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade In div when it's scrolled into viewport
提问by benbuffone
Okay, so I've been searching for a simpleway to fade in a div when a user scrolls it into view, but I can't find a straight solution.
好的，所以我一直在寻找一种简单的方法来在用户将 div 滚动到视图中时淡入它，但我找不到直接的解决方案。
HTML
HTML
<div class="container">
<div class="topdiv">This is a 100% height div. User scrolls down from here.</div>
<div class="fadethisdiv">This content should be faded in
once .fadethisdiv is [so many]px into the bottom of the viewport.
Let's use 150px as an example.</div>
</div>
CSS
CSS
.container {
width:100%;
height:600px;
}
.topdiv {
height:100%;
background-color:#09f;
text-align:center;
font-size:24px;
}
.fadethisdiv {
height:100%;
background-color:#36afff;
text-align:center;
font-size:24px;
}
JS
JS
// Talk to me.
Here's a fiddle: http://jsfiddle.net/kz2z5/2/
这是一个小提琴：http: //jsfiddle.net/kz2z5/2/
采纳答案by Sterling Graham
Here's a solution that triggers the fadeInjQuery function after scrolling by the .topdivdiv.
这是一个fadeIn在.topdivdiv滚动后触发jQuery函数的解决方案。
It subtracts the viewport size from the scrollTopfunction to get the bottom of the scroll position, and then checks whether its value is greater than the height of the .topdivdiv plus the 150px or however far down you'd like it to fadeIn at.
它从scrollTop函数中减去视口大小以获得滚动位置的底部，然后检查它的值是否大于.topdivdiv的高度加上 150px 或您希望它淡入的深度。
Since the div must initially be displayed on the page so that we have somewhere to scroll down to we set the visibilityto hiddeninstead of using display:none. We're using fadeIn, which expects the element to start with display:none, so we hide the .fadethisdivdiv and fade it in.
由于 div 必须最初显示在页面上，以便我们有地方向下滚动，我们将 设置visibility为hidden而不是使用display:none。我们正在使用fadeIn，它期望元素以 开头display:none，因此我们隐藏.fadethisdivdiv 并将其淡入。
We then remove the scroll listener so that the element doesn't continuously hide and fadeInafter we have scrolled past the .fadethisdivdiv.
然后我们移除滚动监听器，这样元素就不会fadeIn在我们滚动过.fadethisdivdiv之后继续隐藏。
$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $(".topdiv").height();
var viewPortSize = $(window).height();
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
if ($(window).scrollTop() >= triggerHeight) {
$('.fadethisdiv').css('visibility', 'visible').hide().fadeIn();
$(this).off('scroll');
}
});
回答by BernieSF
I found the library AOS very useful for this purpose (https://github.com/michalsnik/aos#-animations). Additionally to fade in when your div comes into the viewport, other effects are available. See example below
我发现 AOS 库对此非常有用（https://github.com/michalsnik/aos#-animations）。除了当您的 div 进入视口时淡入之外，还可以使用其他效果。请参阅下面的示例
<script src="js/aos.js"></script>
<link href="css/aos.css" rel="stylesheet" />
<div id="content1" data-aos="flip-down" data-aos-delay="0">
<p>Some content</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
AOS.init();
AOS.refreshHard(); //optional
});
</script>
回答by dbucki
Here is solution, is set on 300px
这是解决方案，设置为 300px
$(document).ready(function(){
var view = {};
var checkPosition = function(){
var elem = $('.fadethisdiv'), top = elem.offset().top;
if (top - view.limit < 300) {
elem.css('display','none');
}
};
$(window).bind('scroll', function() {
view.top = $(window).scrollTop();
view.limit = view.top + $(window).height();
checkPosition();
});
});
Enjoy! :)
享受！:)
