滚动时如何淡入窗口底部的div？
[英]How to fadeIn a div at the bottom of the window when scrolling?
问题描述
I have this problem which is probable very simple to solve, but I'm a newbie with JS/JQuery.
我有这个问题很可能很容易解决，但我是 JS/JQuery 的新手。 I have this code (see fiddle here: https://jsfiddle.net/Tiph/6ep3hp4j/ ) where my div footer shows when the scroll gets at the bottom of the document, but I want it to show when the scroll gets at a certain height under my header and have a fixed position at the bottom of my window.我有这个代码（参见这里的小提琴： https : //jsfiddle.net/Tiph/6ep3hp4j/ ），当滚动到达文档底部时我的 div 页脚显示，但我希望它在滚动到达时显示在我的标题下有一定的高度，并在我的窗口底部有一个固定的位置。 I understand that I have to calculate something with window.height, and/of offsetTop, but nothing works.我知道我必须用 window.height 和/of offsetTop 计算一些东西，但没有任何效果。 Someone can help me with it?有人可以帮我吗？ Thank you so much!非常感谢！ :-) :-)
my code here:我的代码在这里：
var footer = $('#footer'),
extra = 10;
footer.css({ opacity: '0', display: 'block' });
$(window).scroll(function() {
var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
documentHeight = $(document).height();
console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )
if( scrolledLength >= documentHeight ) {
footer
.addClass('bottom')
.stop().animate({ bottom: '0', opacity: '1' }, 300);
}
else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {
footer
.removeClass('bottom')
.stop().animate({ bottom: '-100', opacity: '0' }, 300);
}
});
4 个解决方案
解决方案1
1 已采纳 2016-03-14 08:29:22
I create new sample code for you to understand how its work我为您创建了新的示例代码以了解其工作原理
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
var count=700;
var menuHeight = $('#footer').height()+count;
var top = $(this).scrollTop();
var bottom = $(document).height() - $(this).height() - $(this).scrollTop();
if (bottom < menuHeight) {
$('#footer').removeClass( 'top' );
$('#footer').addClass( 'bottom' );
$('#footer').fadeIn( 'slow' );
}
else {
$('#footer').fadeOut( 'slow' );
}
});
});
</script>
<meta charset="utf-8">
</head>
<body>
<style>
#footer{
width: 100%;
height: 60px;
background-color: #cccccc;
vertical-align: middle;
text-align: center;
font-size:3em;
}
.bottom{
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
display:block;
}
</style>
<div style="height:2000px;"></div>
<div id="footer" style="display:none" > This is your footer</div>
<div style="height:700px"></div>
Try to change the number 700 to set where you want to footer to be shown尝试更改数字 700 以设置要显示页脚的位置
解决方案2
0 2016-03-14 08:04:58
Say you want the header to show when you have scrolled 100px from the top.假设您希望在从顶部滚动 100 像素时显示标题。
You can do something like:您可以执行以下操作：
$(window).on("scroll", function() {
if(document.body.scrollTop >= 100) {
$("#footer").fadeIn()
} else {
$("#footer").fadeOut()
}
});
Say, you want to only show the header if a button with id, callToAction is above the viewport, you can do:假设您只想显示带有 id、 callToAction的按钮位于视口上方时的标题，您可以执行以下操作：
$(window).on("scroll", function() {
if(document.getElementById('callToAction').getBoundingClientRect().top <= 0) {
$("#footer").fadeIn()
} else {
$("#footer").fadeOut()
}
});
解决方案3
0 2016-03-14 08:06:51
This code var y = $(this).scrollTop();这段代码var y = $(this).scrollTop(); get your scroll height from top.从顶部获取滚动高度。
$(window).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) { // scroll gets at a certain height
$('.bottomDiv').fadeIn();
} else {
$('.bottomDiv').fadeOut();
}
});
解决方案4
0 2016-03-14 08:11:45
If I correctly understand your question you need to change documentHeight with value what you want.如果我正确理解您的问题，您需要使用您想要的值更改documentHeight 。
Example: documentHeight = 150;示例： documentHeight = 150; not documentHeight = $(document).height();不是documentHeight = $(document).height();
It is good idea to rename documentHeight variable.重命名documentHeight变量是个好主意。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.