当窗口从顶部滚动一定距离时div淡入 [英] div fade-in when window is scrolled a certain distance from the top
本文介绍了当窗口从顶部滚动一定距离时div淡入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的< head> 标记中有以下脚本，当窗口为150px时，它会动画我的 div 从底部。我不知道如何改变它，所以它在距离顶端一定距离时动画。
< script>
$（window）.scroll（function（）{
if（$（window）.scrollTop（）+ $（window）.height（）== $（document）.height（） - 150 ）{
isShown = true;
$（'。footer-btn'）。fadeIn（500）;
} else {
$（'。footer-btn'）。 fadeOut（500）;
}
}）;
< / script>
解决方案
这是一个jQuery脚本，
更改 offset（）的值以控制淡入激活位置。
jQuery（document）.ready（function（$）{//浏览器窗口滚动位置（以像素为单位）按钮将出现的位置//调整此数字以在按钮出现在向下滚动时选择var offset = 200，//动画持续时间（以毫秒为单位）scroll_top_duration = 700，// bind with （）。（$（this）.scrollTop（）> offset）？$ animation.addClass（） （'visible'）：$ animation.removeClass（'visible'）;}）;}）;
#container {height：800px;}＃button {border：1px solid black;填充：10px;宽度：100px; text-align：center; background-color：chartreuse;}。animation {position：fixed;底部：25px; right：25px;不透明度：0; transition：不透明度.3s 0s，visibility 0s .3s;}。visible {visibility：visible; / *该按钮变得可见* / opacity：1;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =container> < p> SCROLL DOWN< / p> < a id =buttonclass =animation> BUTTON< / a>< / div>
http://jsfiddle.net/zmz6g8kh/4/
I have the following script in my <head> tag which animates my div when the window is 150px from the bottom. I am not sure how to alter it so it animates when a certain distance from the top.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()-150){
isShown = true;
$('.footer-btn').fadeIn(500);
}else{
$('.footer-btn').fadeOut(500);
}
});
</script>
解决方案
Here's a jQuery script that I use in a site to set the animation from the top.
Change the value of offset() to control the fade-in activation position.
jQuery(document).ready(function($) {
// browser window scroll position (in pixels) where button will appear
// adjust this number to select when your button appears on scroll-down
var offset = 200,
// duration of the animation (in ms)
scroll_top_duration = 700,
// bind with the button link
$animation = $('.animation');
// display or hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $animation.addClass('visible'):
$animation.removeClass('visible');
});
});
#container {
height: 800px;
}
#button {
border: 1px solid black;
padding: 10px;
width: 100px;
text-align: center;
background-color: chartreuse;
}
.animation {
position: fixed;
bottom: 25px;
right: 25px;
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
}
.visible {
visibility: visible; /* the button becomes visible */
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>SCROLL DOWN</p>
<a id="button" class="animation">BUTTON</a>
</div>
http://jsfiddle.net/zmz6g8kh/4/
这篇关于当窗口从顶部滚动一定距离时div淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
