jquery檢測哪個塊在屏幕上可見時滾動

Question

大家好，我有一些問題，如果不是很難請幫助。

如果我的div塊

<div class="main"> 
     <div class="box block1"></div> 
     <div class="box block2"></div> 
     <div class="box block3"></div> 
     <div class="box block4"></div> 
</div> 

好一些計數現在當你滾動塊顯示在屏幕上，我需要做的是塊的東西時，我滾動檢測滾動頂部我能做到這一點與jQuery每次並檢查它與塊偏移頂部，但它的不好的解決方案，因爲我需要寫很多「如果」來檢查它，它有效，當我有固定的塊計數，但我需要它會工作的動態。我找到了一些插件，但我不想使用插件。我一些基本的簡單的腳本，我可以改變的東西或在其他網站

，如果你有時間做

這是我的HTML

example

我請大家幫忙添加或修改在我的投資組合頁面做一些事情，但它不是動態的，我寫錯誤的代碼:)

你可以在菜單上看到它，當你滾動我添加活動類菜單，如果可見的塊

portfolio

Answer 1

// get top positions and references to all blocks 
 
var pos = $(".box").map(function(){ 
 
    var $this = $(this); 
 
    return { 
 
    el: $this, 
 
    top: $this.offset().top 
 
    }; 
 
}).get(); 
 

 
var $result = $("#result-text"); 
 

 
// Set document scrolling event handler 
 
$(document).on("scroll", function() { 
 
    var visible = []; 
 
    var scrollStart = $(this).scrollTop(); 
 
    var scrollEnd = scrollStart+$(window).height(); 
 
    var vis=[]; 
 
    for (var i=0, l=pos.length; i<l; i++) { 
 
    if (pos[i].top < scrollStart || pos[i].top > scrollEnd) { continue; } 
 
    vis.push(pos[i].el.attr("class")); 
 
    } 
 
    $result.text(""); 
 
    $result.text(vis.join(", ")); 
 

 
}).scroll();

#result { 
 
    background: #fff; 
 
    border: 1px solid red; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.box { 
 
    height: 200px; 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="result">You can see: <span id="result-text"></span></div> 
 
<div class="main"> 
 
     <div class="box block1"></div> 
 
     <div class="box block2"></div> 
 
     <div class="box block3"></div> 
 
     <div class="box block4"></div> 
 
     <div class="box block5"></div> 
 
     <div class="box block6"></div> 
 
     <div class="box block7"></div> 
 
     <div class="box block8"></div> 
 
     <div class="box block9"></div> 
 
     <div class="box block10"></div> 
 
</div>

Answer 2

看一看這個人口統計學https://jsfiddle.net/ub5awyqa/

$(window).scroll(function(){ 
    $('.main div').each(function(){ 
     if(isVisible($(this), $(window))){ 
     console.log($(this).attr('class')+" is visible"); 
     }; 
    }); 
}); 

ISVISIBLE -

function isVisible(row, container){ 
    var elementTop = $(row).offset().top, 
     elementHeight = $(row).height(), 
     containerTop = container.scrollTop(), 
     containerHeight = container.height(); 

    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight)); 
} 

在控制檯上，您會注意到只顯示塊元素的可見部分！

默認情況下，通過移除滾動事件來獲得顯示塊的一部分。