2017-07-13 10 views
0

誰かからアドバイスをいただけますか?残念ながら最初の.eachループ(スクロールによってトリガーされない)がすべての項目に表示されます。これはなぜですか?ビューポートに表示され、ロード中のすべてのものが表示されます

window.onload = function(){ 

    $.fn.visible = function(detectPartial){ 
    detectPartial = (!!detectPartial); // if null or undefined, default to false 

    var viewport = $(window), 
     vpWidth = viewport.width(), 
     vpHeight = viewport.height(), 
     vpTop = viewport.scrollTop(), 
     vpBottom = vpTop + vpHeight, 
     vpLeft = viewport.scrollLeft(), 
     vpRight = vpLeft + vpWidth, 

     elementOffset = $(this).offset(), 
     elementTopArea = elementOffset.top+((detectPartial) ? $(this).height() : 0), 
     elementBottomArea = elementOffset.top+((detectPartial) ? 0 : $(this).height()), 
     elementLeftArea = elementOffset.left+((detectPartial) ? $(this).width() : 0), 
     elementRightArea = elementOffset.left+((detectPartial) ? 0 : $(this).width()); 

     return ((elementBottomArea <= vpBottom) && (elementTopArea >= vpTop)) && ((elementRightArea <= vpRight) && (elementLeftArea >= vpLeft)); 
    } 

    $('.portfolio-image-box').each(function(i, el){ 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("in") 
    } else{ 
     el.addClass("out") 
    } 
    }) 

    $(document).scroll(function() { 
    $('.portfolio-image-box').each(function(i, el){ 
     var el = $(el); 
     if (el.visible(true)) { 
      el.removeClass("out") 
      el.addClass("in") 
     } else{ 
      el.removeClass("in") 
      el.addClass("out") 
     } 
    }) 
    }) 

} 
+0

はあなたが私たちにHTMLやフィドルのビットを与えることができます:あなたがスクロールすると、クラスが追加され、そこにビューポート内で何のために削除される、以下のコードを試してみて、放火犯でチェック私たちはコードをテストする? –

+0

https://jsfiddle.net/dancinwolfe/7fydgdL3/4/私はそれが正しいと思う、私はlaravelとブートストラップを使っていたので、ちょっとしたことをHTMLとCSSで混乱させなければならなかった。 –

+0

ありがとうあなたはそれを見て –

答えて

1

私はあなたのコードを少し修正し、クラスが追加および削除されているかどうかを確認するためにコンソールでチェックを行いました。

$.fn.visible = function(detectPartial) { 
 
    detectPartial = (!!detectPartial); // if null or undefined, default to false 
 

 
    var viewport = $(window), 
 
    vpWidth = viewport.width(), 
 
    vpHeight = viewport.height(), 
 
    vpTop = viewport.scrollTop() + $('#navbar').outerHeight(), 
 
    vpBottom = vpTop + vpHeight, 
 
    vpLeft = viewport.scrollLeft(), 
 
    vpRight = vpLeft + vpWidth, 
 

 
    elementOffset = $(this).offset(), 
 
    elementTopArea = elementOffset.top + ((detectPartial) ? $(this).height() : 0), 
 
    elementBottomArea = elementOffset.top + ((detectPartial) ? 0 : $(this).height()), 
 
    elementLeftArea = elementOffset.left + ((detectPartial) ? $(this).width() : 0), 
 
    elementRightArea = elementOffset.left + ((detectPartial) ? 0 : $(this).width()); 
 

 
    return ((elementBottomArea <= vpBottom) && (elementTopArea >= vpTop)) && ((elementRightArea <= vpRight) && (elementLeftArea >= vpLeft)); 
 
} 
 

 
$(document).ready(function() { 
 
    addInAndOut(); 
 
    $(window).scroll(function() { 
 
    addInAndOut(); 
 
    }); 
 
}); 
 

 

 
function addInAndOut() { 
 
    $('.portfolio-image-box').each(function(i, el) { 
 
    var el = $(el); 
 
    if (el.visible(true)) { 
 
     el.removeClass("out").addClass("in"); 
 
    } else { 
 
     el.removeClass("in").addClass("out"); 
 
    } 
 
    }) 
 
}
#navbar { 
 
    border-radius: 0px; 
 
    background-color: #ffffff; 
 
    border-color: #ffffff; 
 
    margin-bottom: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
    font-size: 1.5vh; 
 
    padding: 1.5vh; 
 
} 
 

 
#navbar .fa { 
 
    cursor: pointer; 
 
} 
 

 
body { 
 
    background-color: #fff; 
 
    padding-top: 6vh; 
 
    text-align: center; 
 
} 
 

 
.portfolio-image-box { 
 
    height: 25%; 
 
    width: 14.66vw; 
 
    margin: 1%; 
 
    background-color: #FFFFFF; 
 
    border: 1px solid #e3e3e3; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    display: inline-block; 
 
    float: left; 
 
    border-radius: 0.5vh; 
 
    cursor: pointer; 
 
} 
 

 
.portfolio-image-box:hover { 
 
    transition: 0.5s; 
 
    opacity: 0.6; 
 
} 
 

 
#portfolio { 
 
    text-align: center; 
 
    background-color: #F7F7F7; 
 
} 
 

 
#portfolio-container { 
 
    margin-bottom: 1%; 
 
} 
 

 
.portfolio-image { 
 
    height: 100%; 
 
} 
 

 
#body-title { 
 
    color: #c84630; 
 
} 
 

 
.col-md-12 { 
 
    width: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <h1 id="body-title" class="col-md-6 col-md-offset-3">Portfolio</h1> 
 
</div> 
 
<div class="col-md-6 col-md-offset-3 portfolio"> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
</div>

+0

これはChromeのデベロッパーツールを使用して試しましたが、デフォルトではすべての画像をマークしていますが、スクロールしてからビューポートに入った後に変更するだけです。 –

+0

私は 'Run code snippet'をクリックし、残りは 'out'とマークされていますが、 'in'だけしか表示されません。スクロールすると、新しく着信するものを「中」とマークし、前のものを「中」とマークします。私もChromeで動作しています。 –

+0

私はちょうどカットされたチェックして、それは動作しますが、私はあなたが私はまだ同じ問題が残っている開発しているサイトにあなたの答えをコピーする? –

関連する問題