Question

我正努力让div.projectsgrid <＆lt;从顶部100px，jQuery将看到div.selectedwork是否有css背景颜色#ffffff。如果没有，它会将其背景颜色设置为#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': '#ffffff'});
    }
    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 plug-in。

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

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

2 个答案: