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

Question

我试图让它成为当div.projectsgrid从顶部<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');
    }  
});