基于滚动淡入/淡出div
我看到了许多解决方案,可以使用滚动条(这意味着您必须测量滚动条的位置)。
我想知道是否可以淡入/淡出div,当它碰到屏幕或到达屏幕/视口的顶部时?
干杯
柯
使用JQuery:检测底部:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
$("#divId").FadeIn("400")
}
});
检测顶部:
$(window).scroll(function() {
if($(window).scrollTop() == 0) {
alert("top!");
$("#divId").FadeOut("400");
}
});
希望能帮助到你
基于如何判断一个DOM元素在当前视口中是否可见? 代码未经测试,希望您能理解它。 基本检查元素在视口中是否可见,如果是,则显示fadeIn或如果没有则显示fadeOut。
function isElementInViewport(el)
{
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= $(window).height() &&
rect.right <= $(window).width()
);
}
var $element = $('#element');
$(window).on('DOMContentLoaded load resize scroll', function()
{
if(isElementInViewport($element[0]))
{
// we check if fadeIn is in progress
if(!$element.is(":visible"))
{
$element.fadeIn();
}
}
else
{
$element.fadeOut();
}
});
链接地址: http://www.djcxy.com/p/83587.html