校驗塊的知名度

我們有這樣的代碼：校驗塊的知名度

<body> 
<div class="blocks">some text here</div> 
<div class="end"></div> 
</body>

文本可以適應目前的瀏覽器可見部分與否。

如何檢測，該塊是否在瀏覽器窗口的可見部分？

我的意思是，如果resoution是1024x768和.block高度大於768，那麼.end是不可見的。

我們應該在window.ready和瀏覽器窗口中檢測到這個變化。
如果塊是可見的，那麼運行一些函數。

任何幫助表示讚賞。

來源

2011-03-22 James

您是否需要檢測整個元素是否在視圖中，或只是頂部或底部？ – Blowsie 2011-03-22 15:12:27

東西like this：

$.fn.viewport = (function() { 
    var vp = function(el, opts){ 
     this.el = $(el); 
     this.opts = opts; 
     this.bind(); // bind resize and scroll 
     this.change(); // init change 
    }; 
    vp.prototype = { 
     bind: function(){ 
      $(window).bind('resize scroll', 
          $.proxy(this.change, this)); 
     }, 
     change: function(e){ 
      var p = this.el.position(), 
       o = this.el.offset(), 
       d = { w: this.el.width() +o.left, h: this.el.height()+o.top }, 
       win = $(window), 
       winD = {w:win.width() + win.scrollLeft(), h:win.height()+win.scrollTop()}; 

      if(d.w <= winD.w && d.h <= winD.h){ 
       console.log('inview'); 
      } else { 
       console.log('out of view'); 
       this.opts.outOfView.call(this); 
      } 
     } 
    }; 
    return function(opts){ 
     return $(this).each(function(){ 
      $(this).data('vp', new vp(this, opts)); 
     }); 
    }; 
})();

並使用像這樣：

$('#el').viewport({ 
    outOfView: function(){ 
     alert('out of view'); 
    } 
});

來源

2011-03-22 15:39:39

這對滾動不起作用（即使我們添加滾動檢查）。您只關注元素寬度，而實際上您必須考慮偏移左側和偏移頂部值。 – neebz 2011-03-22 15:46:31

@nEEbz - 已更新。 – 2011-03-22 15:52:37

感謝和好工作。我的版本> http://jsfiddle.net/hPjbh/，儘管你的結構更爲有條理。 – neebz 2011-03-22 15:55:57

先抓住窗口的尺寸。

var windowSize = {width: $(window).width(), height: $(window).height() + $(window).scrollTop()};

下一頁搶在相對於文檔的DIV位置：

var position = $('.block').offset()

然後讓你如果的：

if(position.top > windowSize.height){ /* here we go */ }

你可能想也搶格尺寸的情況下，有一個它可能會出現在頂部或左側的界限之外。

你可以把它變成一個返回布爾值的函數，然後在window.resize和document.ready事件中調用它。

編輯：增加了scrollTop帳戶滾動。

來源

2011-03-22 15:12:56

作爲一個快速回答，你將不得不做一些負載計算（psuedocode假設jQuery）。

查找窗口的高度$（窗口）.outerHeight（真）
找到抵消「.END」元素的$（「結束」）。偏移（）
查找的滾動距離的窗口$（window）.scrollTop（）
計算！它應該大致是：

IF（（步驟1 +步驟3）>第二步）{// 做的東西在這裏 }

注意，不檢查，如果你滾動過去」 .END 「元素。我沒有驗證這一個，所以希望我不會錯過一些大事。

來源

2011-03-22 15:12:57 whoughton

獲取元素
的offsetTop和offsetLeft屬性獲取元素的寬度問題
獲取屏幕的寬度
做了相關的數學，看看元素中視或現在。

在jQuery的你可以這樣做

$("#element").attr("offsetTop")

編輯： 簡單有效：http://jsfiddle.net/hPjbh/

來源

2011-03-22 15:26:37 neebz

很好的答案。另外，您可以執行'$（「＃element」）。offset（）。top'。 – Bojangles 2011-03-22 15:46:34

是的，那更好。 – neebz 2011-03-22 15:56:25

校驗塊的知名度

回答

相關問題