如何選擇，在視口中

我有塊元素div(s)在我的文檔的數量。它們中的每一個都相對對齊。

我想選擇一個佔據更多的視口空間比滾動上的兄弟塊。

查看圖像 -

enter image description here

我tried-

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

計算offset

function isVisible(block, container){ 

    var elementTop = $(block).offset().top, 
     elementHeight = $(block).height(), 
     containerTop = container.scrollTop(), 
     containerHeight = container.height(); 

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

現在，如果你在控制檯注意，我是顯示b鎖在屏幕上可見。現在當兩個或更多塊在屏幕上可見時，只有在視口中佔用更多空間的塊。

當前，它正在選擇兩個塊。我不知道現在如何處理它。

這裏您可以找到fiddle- https://jsfiddle.net/13odrk4t/

來源

2015-04-03 Manoj

最可見=？請提供**固體**定義。 – Sharky 2015-04-03 12:02:55

獲得屏幕X的可見部分，Y到X + visible_width，Y + visible_height遍歷所有可見元素找到它們的X，Y和X +寬度，Y +高度區域，並計算與屏幕可見部分重疊的區域視口）。如果可見元素彼此重疊，則對每個元素進行相同的檢查，並且如果它具有比其他重疊元素低的z-索引則取消重疊區域。現在有人可以將其編碼爲我想的答案。當然這一切都必須在pagescroll或其他東西上計算。 – Sharky 2015-04-03 12:06:47

上圖中綠色的塊比下面的塊更明顯，我想選擇那個綠色塊。反之亦然紫色。 – Manoj 2015-04-03 12:06:49

您所遇到的問題的基本部分是你正試圖確定最可見的項目，但你只檢查每個元素的可見性。相反，您需要能夠比較每個塊佔用的可視空間的百分比並找到最大值。因此，在概念上，這看起來像

對於每一個元素得到採取的百分比高達
比較每個百分點，保持了一個佔用空間
的更多比例在你的元素序列的結束最大的價值，並做你需要的。

在功能更強大的僞代碼方式，我認爲這有點像

elements.map(e => (e, percentTaken(e)).fold(None)((max, ep) => if (max == None or max.percent < ep.percent) ep else max))

下面是我如何解決它的小提琴。我認爲它給你你想要的，但可能可以使用一些清理，使其更習慣和獲得百分比清潔的邏輯 https://jsfiddle.net/7s95a4nn/

來源

2015-04-03 12:31:54

謝謝你@Craig Suchanec，太棒了！ – Manoj 2015-04-03 12:49:21

如何選擇，在視口中

回答

相關問題