Question

我已经好好看了一下，我在这里遇到了一些非常困难的jQuery，我只能找到在滚动时为div添加类的解决方案，但只能通过某个数字像素数。

这是我的问题的{jsfiddle http://jsfiddle.net/sqz75b9g/

还复制在jquery中。现在，这在用户向下滚动500像素的目的下工作得很好。但我希望当用户到达.content div 时，addClass会发生，不仅仅是像素高度。

任何建议都将不胜感激。非常感谢你。

$(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

您可以使用offset（）方法知道元素的位置：

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');
    }
});

滚动的jQuery addClass＆＃39; at＆＃39;一个div

3 个答案: