1

こんにちは、私は以下のサイトのようなスティッキー購読ボックスに取り組んでいます

https://generalassem.ly/

私は次の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 を超えるとサブスクライブ ボックスが表示されるという機能をもう 1 つ追加する必要があることです。

4

1 に答える 1

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');}           
});
于 2014-02-06T11:43:49.233 に答える