当元素处于视口中时显示并隐藏div
问题描述:
当<span class="waar">
位于视口中时,我想<div class="sticky-info">
隐藏。当<span class="waar">
离开视口时,我想要<div class="sticky-info">
隐藏。当元素处于视口中时显示并隐藏div
第一部分隐藏<div class="sticky-info">
正常工作,但第二部分显示<div class="sticky-info">
没有。可能它真的很愚蠢,但我不是那个JS向导。这是JS。
<!--sticky info-->
<script type="text/javascript">
$(window).scroll(function() {
if ($('.waar:in-viewport')) {
$('.sticky-info').hide();
} else {
$('.sticky-info').show();
}
});
</script>
的页面,您可以点击这里查看 http://www.joets.be/test/joetz/page_vakanties.html
THX
答
你的if语句将永远是正确的。 $('.waar:in-viewport')
会返回一个jQuery对象,是否为空,没关系,它是一个真值。
我相信你正在寻找的是.is()
:
$(window).scroll(function() {
if ($('.waar').is(':in-viewport')) {
$('.sticky-info').hide();
} else {
$('.sticky-info').show();
}
});
注:这是假设你的插件支持相同的功能原生的jQuery伪选择..
1)是否使用此? http://www.appelsiini.net/projects/viewport我从来没有听说过:在视口中,所以我认为你是。 2)你的问题很奇怪,你想隐藏一个元素,当它在视口之外时,即它不可见?这是正常的浏览器行为。用户如何知道该元素是隐藏的?或者你可能打算淡入淡出。 – lharby 2015-02-06 13:45:06
是的,这是我使用的viewport.js。实际上,这是相反的。在视口中隐藏时,显示何时出视口。 – MDC 2015-02-06 13:55:01
我改变了问题。 – MDC 2015-02-06 14:17:31