2011-11-06 63 views
0

我有2 divsjQuery的發現,當用戶滾動出一個元素

<div id="div1"></div> 
<div id="div2"></div> 

我想補充css({'position':'relative'})到DIV2僅當用戶滾動頁面和DIV1不再在頁面上可見。當div1再次可見時,我想刪除css規則。

任何人都可以幫助我嗎?

+0

看起來完全一樣:http://remysharp.com/2009/01/26/element-in-view-event-plugin/。 – pimvdb

回答

1

這不是完美的,但我寫你一個快速的插件來照顧這: http://jsfiddle.net/m7ztR/1/

它可以以兩種方式使用:

它給你一個新的選擇器 console.log($("#elem").is(":inView")? "visible":"invisible");

您還可以使用它來獲取所有可見元素,例如 console.log($("p:inView").get());

和類似的事件監聽器 $( 「#watchThisElement」).visibilityChange(函數(可視){ 如果(可視){// 做到這一點... } 其他{ //這樣做... } });

注意:這是不完整的一堆原因!

  1. 它只能處理垂直滾動
  2. 它不處理I幀(和可能與嵌套滾動可怕弄糟)
  3. 沒有解除綁定
  4. 如果你看很多的元素,它可能會慢
  5. 沒有考慮窗口大小調整到

這件事情我很快從類似的代碼,我已經坐在了黑客攻擊。

如果的jsfiddle鏈接永遠不會死的,這裏的實際代碼和標記:

HTML:

<div id="status">look at my background color!</div> 

<div id="above">lots of space above ... </div> 
<div id="trackMe">i'm being tracked!</div> 
<div id="below">lots of space below ... </div> 

CSS:

#status{ 
    position: fixed; 
    right: 0; 
    top: 0; 
    background-color: red; 
} 

#above, #below{ 
    height: 800px; 
    background-color: yellow; 
} 

的javascript:

/** 
* jquery (in)visibility plugin ... 
*/ 
(function($){ 
    var w = $(window); 

    // add a custom ":inView" selector 
    $.expr[':'].inView = function(obj){ 
     var $this = $(obj); 
     var relY = $this.offset().top - w.scrollTop(); 
     return relY >= 0 && relY <= w.height(); 
    }; 

    $.fn.visibilityChange = function(fun) { 
     return this.each(function() { 
      var elem = $(this); 
      var pVisible = elem.is(":inView"); 
      $(document).scroll(function(e){ 
       if(pVisible != elem.is(":inView")){ 
        pVisible = !pVisible; 
        fun(pVisible); 
       } 
      }); 
     }); 
    }; 
})(jQuery); 



$("#trackMe").visibilityChange(function(visible){ 
    $("#status").css("background-color", visible? "green":"red"); 
}); 
1

我認爲你應該使用window.onscroll,窗口高度和div1的高度做一些技巧。如...在onscroll方法中執行一些代碼...檢查窗口高度,檢查div1的高度,對其進行一些計算並檢查div是否看不見...如果爲true ...刪除CSS。

+0

我可以嘗試,但我不明白如何控制滾動頁面時,如果div1仍然可見再次... uhm – sbaaaang

+0

呃我覺得有div1高度是唯一的解決方案... ...你的想法? – sbaaaang

+0

如果您在向下滾動之前知道div的位置(查看頁面中的位置和高度),則必須能夠確定當頁面向上滾動時是否應再次顯示div。你的意思是 –

2

你可以試試這個代碼:

$(window).bind('scroll', function() { 
if ($(document).scrollTop() >= $('#div1').offset().top - $(window).height()) { 
    //Change css relative 
}else{ 

} 
}); 

直到你得到一個完美的結果應該與發揮。祝你好運

相關問題