大家好,我正在使用像网站下面的粘性订阅框
我使用了以下js
$.fn.is_on_screen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
$(window).scroll(function(){ // bind window scroll event
if( $('#foot').length > 0 ) { // if target element exists in DOM
if( $('#foot').is_on_screen() ) { // if target element is visible on screen after DOM loaded
$('.subscribeBox').fadeOut(1000);
} else {
$('.subscribeBox').fadeIn(1000);
}
}
});
但问题是我必须再添加一项功能,当滚动量大于> 200时,订阅框会变得可见其他老虎机隐藏的plz让我有一些建议如何去做。
答案 0 :(得分:1)
经过多次尝试后,我发现它的解决方案......只是一个愚蠢的错误......
HTML
<header id="head">
<p>Fixed Naviagtion</p>
</header>
<div class="content">
<p>Some Content</p>
</div>
<footer id="footer">
<p>Footer Contents</p>
</footer>
<div class="subscribeBox">
<p>Subscribe me</p>
</div>
这里是纯粹的js代码..
$.fn.is_on_screen = function(){
var win = $(window);
var viewport = {top : win.scrollTop(),left : win.scrollLeft()};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
$(window).scroll(function() {
if ($(window).scrollTop() > $('#head').height() ) {
if( $('#foot').length > 0 ) {
if( $('#foot').is_on_screen() ) {
$('.subscribeBox').fadeOut('slow');
}else {$('.subscribeBox').fadeIn('slow');}
}}
else{$('.subscribeBox').fadeOut('slow');}
});