jQuery addClass on scroll 'at' a div

Question

У меня был хороший внешний вид, и у меня очень тяжелое время здесь с некоторыми jQuery, я могу найти решения для добавления класса в div при прокрутке, но только с помощью определенное числовое число пикселей.

Вот jsfiddle моей проблемы http://jsfiddle.net/sqz75b9g/

также копируется в 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'); 
    } 
});