檢測元素從窗口頂部小於100px時，更改CSS

我試圖讓div.projectsgrid是<是<從頂部100px，jQuery將會看到如果div.selectedwork有css background-color #ffffff。如果沒有，它會將其背景顏色設置爲#ffffff。一旦用戶滾動備份並且div.projectsgrid距離頂部超過100px，jQuery將刪除背景顏色。我有以下代碼，這是行不通的：檢測元素從窗口頂部小於100px時，更改CSS

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

來源

2011-03-11 steve

我會用類而不是看背景色。另外，你的「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'); 
    } 
});

來源

2011-03-11 23:33:11 Mottie

這工作！我打算使用一堂課，但我計劃在動畫背景上淡化。所以offset（）。top不是計算在瀏覽器的頂部，而是整個文檔的頂部，因此你減去了scrollTop？我有點困惑。 – steve 2011-03-11 23:42:46

是的，'$（'＃projectsgrid'）。offset（）。top'是一個常量。當您滾動窗口時，只有'$（document）.scrollTop（）'會改變（並且它是可查看頁面頂部的值）。所以你可以通過減去項目網格頂部到頁面頂部多遠。 – Mottie 2011-03-11 23:45:47

這應做到：

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

來源

2011-03-11 23:50:20

這也適用，代碼少。我從來沒見過'pg [0]'帶'？'。這是如何運作的？另外，有沒有一種方法可以淡化它，而不是僅僅設置CSS？ – steve 2011-03-11 23:58:14

@steve我建議滑動。看到我更新的演示。 – 2011-03-12 00:12:56

滑動在這裏並不會真的有很大幫助。 #projectsgrid始終存在，位於.selected作品下方。我只需要選定的工作bg淡入。或淡入一個新的班級。有沒有辦法使用'？'與'sw.animate（{backgroundColor：「yellow」}，「slow」）;' – steve 2011-03-12 00:23:55

檢測元素從窗口頂部小於100px時，更改CSS

回答

相關問題