是可能的切换元件的可见性,使用函数.hide(),.show()或.toggle().
如何测试元素是可见还是隐藏？
是否有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(出现在视口中)？
(关于Firefox的问题)
我在我的网站中使用jQuery,并且当某个div可见时我想触发某些操作.
是否有可能将某种"isvisible"事件处理程序附加到任意div并且在div可见时运行某些代码？
我想要像下面的伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
在实际使contentDiv可见之前,不应触发警报("执行某些操作")代码.
谢谢.
我想创建一个div,它位于一个内容块下面,但是一旦页面滚动到足以接触其顶部边界,就会固定到位并与页面一起滚动.我知道我至少看过一个这样的在线例子,但我不记得它对我的生活.
有什么想法吗？
用于检查div类"media"是否在浏览器可视视口内,而不管窗口滚动位置如何.
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<div class="main">
<div class="media"></div>
</div>
</BODY>
</HTML>
尝试使用此插件https://github.com/customd/jquery-visible与此功能,但我不知道如何使其工作.
$('#element').visible( true );
可能重复:
jQuery - 滚动后检查元素是否可见
我正在尝试确定元素是否在屏幕上可见.为了达到这个目的,我试图使用offsetTop找到元素的垂直位置,但返回的值不正确.在这种情况下,除非向下滚动,否则元素不可见.但是尽管如此,当我的屏幕高度为703时,offsetTop返回值618,因此根据offsetTop,元素应该是可见的.
我正在使用的代码如下所示:
function posY(obj)
{
var curtop = 0;
if( obj.offsetParent )
{
while(1)
{
curtop += obj.offsetTop;
if( !obj.offsetParent )
{
break;
}
obj = obj.offsetParent;
}
} else if( obj.y )
{
curtop += obj.y;
}
return curtop;
}
先感谢您!
基本上,我想知道是否有一种方法可以在元素隐藏或可见时自动运行函数,而不是在用户单击时自动运行,而是在另一个脚本中自动运行.
我不希望这只运行一次,因为元素(如滑块)不断从可见变为隐藏.
这是jQuery可以用bind做的吗？比如将元素的可见性绑定到一个函数(我不知道如何写这个)
如果您需要我详细说明我正在尝试做什么,请告诉我.谢谢
伪代码:
$('#element').bind('display:none', function);
function(){
//do something when element is display:none
}
$('#element').bind('display:block', function2);
function2(){
//do opposite of function
}
我有一个很长的页面,可以在用户滚动时动态加载图像.
但是,如果用户快速滚动离开页面的某个部分,我不希望图像继续加载到页面中现在看不到的部分.
除了图像加载之外,页面上还有许多其他请求同时发生,因此在滚动事件上触发一个钝的window.stop()是不可接受的.
我已经尝试删除和清除不再在视图中的图像的img src属性,但是,由于请求已经启动,图像继续加载.
请记住,当用户短暂滚动浏览页面的那一部分时,图像src已填充.一旦过去,我无法在不使用window.stop()的情况下从停止加载中获取该图像.清除src不起作用.(Chrome&FF)
类似的帖子我发现接近,但似乎没有解决这个问题:
我知道有几次这样的变化; 我已经浏览了一段时间,但要么我做错了,要么我找不到我需要的东西.
我有一个嵌套注释的结构,几乎和Facebook Comments插件一样,每当reply点击时,一个带有textarea的小表单和一个按钮出现在注释的底部.
同样,行为与Facebook Comments插件相同,我想在滚动新添加textarea到视图时实现相同的功能.
我已经尝试了scrollTo插件,它运行顺畅但是,即使我手动滚动到页面的最底部,滚动动画也将始终重置滚动位置并从顶部开始.
为了记录,这就是我调用scrollTo的方式:
$.scrollTo($('#addReply_1'), 800);
其中addReply_1在div包含表单.我已经大步滚动到表单本身和表单textarea.结果相同.
有没有办法滚动到元素只有它尚未可见？
我已经尝试过在SO上提供的许多解决方案,比如使用jQuery滚动到一个元素,但似乎都没有按照需要行事; 甚至滚动到具有jQuery的特定元素或在滚动后检查元素是否可见显示相同的"跳跃"行为.
更新:在线演示以显示行为
我上传了一个html演示页面,显示了我抱怨的行为:http://www.wouldbebetter.com/demo/comment-demo.htm
只需滚动到页面底部,然后单击任何Reply链接即可查看我所指的"跳跃"滚动.
请注意,此演示使用scrollintoview@Robert Koritnik的答案插件,但如果我使用ScrollTo,行为也是一样的.
如何检测用户何时到达此div:
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="theTarget">I have been reached</div>
得到了这个问题的答案:
所以我这样做了:
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= …javascript ×9
jquery ×8
html ×4
css ×2
dom ×2
scroll ×2
ajax ×1
browser ×1
firefox ×1
image ×1
offset ×1
position ×1
positioning ×1
visibility ×1
visible ×1