检测元素从窗口顶部小于100px时，更改CSS

我试图让它成为当div.projectsgrid从顶部<100px时，jQuery将看到div.selectedwork是否有css背景颜色div.selectedwork 。 如果没有，它会将其背景颜色设置为#ffffff。 一旦用户向上滚动并且div.projectsgrid从顶部超过100px，jQuery将删除背景颜色。 我有以下代码，它不起作用：

 $(window).scroll(function(e){ var el = $('.selectedwork'); var top = $('#projectsgrid').offset().top; if ($(top)  100 && el.css('background-color') == '#ffffff'){ $(el).css({'background-color': ''}); } }); 

Answer 1

我会使用一个类而不是看背景颜色。 此外，您的“projectgrid”是一个ID，而不是一个类。 我也把距离调整到200，因为它看起来好像更好。

我就是这样做的：

CSS

 .bg-black { background-color: #000; } 

脚本

 $(document).scroll(function(){ var el = $('.selectedwork'), top = $('#projectsgrid').offset().top - $(document).scrollTop(); if (top < 200 && !el.is('.bg-black')){ $(el).addClass('bg-black'); } if (top > 200 && el.is('.bg-black')){ $(el).removeClass('bg-black'); } }); 

Answer 2

这应该这样做：

 $(window).scroll(function(e) { var sw = $('.selectedwork'), pg = $('.projectsgrid'), diff = pg[0].offsetTop - window.pageYOffset; sw.css('background-color', diff < 100 ? 'yellow' : ''); }); 

现场演示： http ： //jsfiddle.net/SJDcS/2/

---

[0]和? 不相关：

[0]是从jQuery对象获取第一个DOM元素的便捷方法。 在上面的例子中，jQuery对象pg只包含一个DOM元素，因此pg[0]将获得该元素。 我检索DOM元素，因为属性offsetTop是DOM元素属性而不是jQuery属性。 我猜pg[0].offsetTop和pg.offset().top返回相同的值。

? 是JavaScript的条件运算符的一部分。 条件运算符是根据条件设置两个不同值的便捷方法。

如果声明：

 if ( x > 10 ) { y = 'Yes'; } else { y = 'No'; } 

条件运算符：

 y = x > 10 ? 'Yes' : 'No'; 

如您所见，条件运算符是更好的选择。

---

用彩色动画：

 $(window).scroll(function(e) { var sw = $('.selectedwork'), pg = $('.projectsgrid'), diff = pg[0].offsetTop - window.pageYOffset; sw.animate({ backgroundColor: diff < 100 ? '#FFAAAA' : '#EEEEEE' }, 200); }); 

注意：此解决方案需要jQuery Color插件 。

现场演示： http ： //jsfiddle.net/SJDcS/4/