我希望当页面滚动离开页面顶部时淡入 div,但是我希望在接近页面底部时再次隐藏该 div。
具体来说,我希望 div 在距顶部 200px 或距底部 200px 以内时隐藏。
我有两个独立工作的脚本,但是当两个脚本都处于事件状态时,两者之间的冲突会导致 div 闪烁进出 View 。
如何组合以下脚本来避免这种冲突?非常感激任何的帮助。谢谢!
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
和
$(function () {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
最佳答案
这个怎么样:
$(function () {
var $window = $(window);
$window.scroll(function () {
var scrollTop = $(this).scrollTop();
// only fadeIn between 200 from top and 200 from bottom
if (scrollTop > 200 && scrollTop < $(document).height() - $window.height() - 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
关于javascript - 仅在页面中间时显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34945955/