jQuery addClass滾動'在'一個div

Question

我有一個很好的看看，我在這裏有一個真正的困難與一些jQuery，我只能找到解決方案添加一個類時滾動，但只有通過一個div某個數字像素數。

這裏是我的問題http://jsfiddle.net/sqz75b9g/

的的jsfiddle在jQuery的也將被複制。現在這個功能在用戶向下滾動500個像素的目的下效果很好。但是我希望addClass在用戶達到.content div，時發生而不僅僅是像素高度。

任何意見將不勝感激。非常感謝你。

$(function() { 
    var header = $('header'); 
    var menu = $('#menu'); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 500) { 
      header.addClass('dark'); 
      menu.addClass('dark'); 
     } else { 
      header.removeClass('dark'); 
      menu.removeClass('dark'); 
     } 
    }); 
}) 

Answer 1

您可以使用下面的代碼：

var hieghtThreshold = $(".content").offset().top; 

小提琴鏈接：http://jsfiddle.net/sqz75b9g/6/

$(function() { 
var header = $('header'); 
var menu = $('#menu'); 
var hieghtThreshold = $(".content").offset().top; 
var hieghtThreshold_end = $(".content").offset().top +$(".content").height() ; 
$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= hieghtThreshold && scroll <= hieghtThreshold_end) { 
     header.addClass('dark'); 
     menu.addClass('dark'); 
    } else { 
     header.removeClass('dark'); 
     menu.removeClass('dark'); 
    } 
}); 

}）

Answer 2

在這種情況下，你需要使用.offset().top：

$(function() { 
    var header = $('header'); 
    var menu = $('#menu'); 
    $(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= $('.content').offset().top) { // check the offset top 
     header.addClass('dark'); 
     menu.addClass('dark'); 
    } else if(scroll >= $('.content').offset().top+$('.content').height()){ // check the scrollHeight 
     header.removeClass('dark'); 
     menu.removeClass('dark'); 
    } 
    }); 
}); 

---

if (scroll >= $('.content').offset().top) {檢查特定元素是在視圖中。

} else if(scroll >= $('.content').offset().top+$('.content').height()){這將檢查元素是否從視圖傳遞。

Answer 3

可以使用偏移（）方法來知道哪裏是你的元素：

var header = $('header'); 
var menu = $('#menu'); 
$(window).scroll(function() { 
    var scroll = $('.element').offset().top; // look at this 

    if (scroll >= 500) { 
     header.addClass('dark'); 
     menu.addClass('dark'); 
    } else { 
     header.removeClass('dark'); 
     menu.removeClass('dark'); 
    } 
});