我有2 divs
:jQuery的發現,當用戶滾動出一個元素
<div id="div1"></div>
<div id="div2"></div>
我想補充css({'position':'relative'})
到DIV2僅當用戶滾動頁面和DIV1不再在頁面上可見。當div1再次可見時,我想刪除css規則。
任何人都可以幫助我嗎?
我有2 divs
:jQuery的發現,當用戶滾動出一個元素
<div id="div1"></div>
<div id="div2"></div>
我想補充css({'position':'relative'})
到DIV2僅當用戶滾動頁面和DIV1不再在頁面上可見。當div1再次可見時,我想刪除css規則。
任何人都可以幫助我嗎?
這不是完美的,但我寫你一個快速的插件來照顧這: http://jsfiddle.net/m7ztR/1/
它可以以兩種方式使用:
它給你一個新的選擇器 console.log($("#elem").is(":inView")? "visible":"invisible");
您還可以使用它來獲取所有可見元素,例如 console.log($("p:inView").get());
和類似的事件監聽器 $( 「#watchThisElement」).visibilityChange(函數(可視){ 如果(可視){// 做到這一點... } 其他{ //這樣做... } });
注意:這是不完整的一堆原因!
這件事情我很快從類似的代碼,我已經坐在了黑客攻擊。
如果的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");
});
你可以試試這個代碼:
$(window).bind('scroll', function() {
if ($(document).scrollTop() >= $('#div1').offset().top - $(window).height()) {
//Change css relative
}else{
}
});
直到你得到一個完美的結果應該與發揮。祝你好運
看起來完全一樣:http://remysharp.com/2009/01/26/element-in-view-event-plugin/。 – pimvdb