[英]How to hide an element when it has reached another element on scroll down?
我在bottom: 0
有一个固定按钮bottom: 0
,单击该按钮可滚动到另一个元素,但是当它到达该元素时,我需要将其隐藏,并在滚动到该元素上时再次显示它。
我该如何使用jQuery
?
到目前为止,我已经做到了,但这还不够。
function hideScroller () {
div1 = $('#form');
div2 = $('#slide-to-contacts');
div1FromTop = div1.offset().top;
div2FromTop = $('body').scrollTop();
if (div1FromTop <= div2FromTop) div2.hide();
else div2.show();
}
我的工作原理大致符合我的预期,只是div2的选择器不正确。 最好使用$(window).scrollTop()
或者必须使用$('html, body').scrollTop()
。
更新-调整触发触发器的时间:
http://jsfiddle.net/ydbev5rq/7/
div2FromTop = $(window).scrollTop()+$(window).height();
当然,在永远不会受伤的情况下使用$(this)
...
div2FromTop = $(this).scrollTop()+$(this).height();
使用您的代码即可解决。只需更改div2 id并将> =更改为<并将div1.scrollTop()更改为offset()。top。
这是js代码
function hideScroller() {
div1 = $('#form');
div2 = $('#scroll-to-contacts');
div1FromTop = div1.offset().top;
div2FromTop = $('#scroll-to-contacts').offset().top;
if (div1FromTop < div2FromTop) div2.hide();
else div2.show();
}
$(document).ready(function () {
//hideScroller();
form = $('#form');
$('#scroll-to-contacts').click(function () {
$('html, body').animate({
scrollTop: form.offset().top
}, 1000);
});
});
$(window).scroll(function () {
hideScroller();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.