的jsfiddle我怎麼得到scrollTop的值小提琴

Here is the jsfiddle 的jsfiddle我怎麼得到scrollTop的值小提琴

我想要的類改當scrolltop達到if語句中指定的值內...

我不知道是什麼愚蠢錯誤我已經，我不能讓它的工作

2016-07-26 Caro

你有沒有看看[控制檯]（http://webmasters.stackexchange.com/a/77337/19742）？ – George

是的，我找不到它。我試圖理解jsfiddle以獲得更好的示例，但是在使用它們時，其他小提琴中的某些代碼不會這樣做。 – Caro

有一點需要注意 - 一旦您已經消化了下面的良好答案。你已經在id容器上指定了'background-color：green'。不管你之後申請什麼課程，你的背景顏色都不會改變，因爲針對ID的樣式優先於類應用的樣式。這只是CSS的工作方式，與代碼無關。 – Jamiec

有幾件事你的代碼錯誤：

我不認爲jQuery有一個onscroll功能
你有你的第二個如果$('#main' <缺少一個右括號 - 在這裏
與住，如果，你已經錯過了斷scrollTop的功能
要檢查的主要的scrollTop的值括號 - 它會始終爲0，因爲它從不滾動，您正在滾動窗口

請嘗試以下操作（更改註釋）;

$(window).on('scroll', function() { // change to scroll rather than onscroll 
    var scrollTop = $(this).scrollTop(); // get scroll top of the thing that is scrolling and cache for better performance 
    if (scrollTop > 100) { 
    $("#container").addClass("red"); 
    } else if (scrollTop > 500) { 
    $("#container").removeClass("red").addClass("blue"); // chain actions 
    } else { 
    $("#container").removeClass("red blue"); // you can pass two classes into this 
    } 
});

如果你使用這個在你的小提琴和檢查容器，你會看到類得到補充（你不會看到它改變顏色，因爲它去上課之前更改關閉屏幕）

來源

2016-07-26 15:31:41 Pete

'未捕獲的ReferenceError：$未定義''在你的片段中 - 你忘了選擇jQuery幷包含相關的html – Jamiec

@Jamiec對不起，不打算成爲一個片段 - 只是修復OP代碼 – Pete

是的，但是如果你嘗試它，你會發現它仍然不起作用 - 背景不會從綠色變爲綠色，因爲該css是針對一個id指定的，並且先於'.red'類。 – Jamiec

的jsfiddle我怎麼得到scrollTop的值小提琴

回答

相關問題