2017-07-28 85 views
2

所以我真的很新,在HTML中使用JavaScript和jQuery,所以這可能是一個非常基本的問題,但我真的很掙扎。消失的文檔標題

我有一個頭文件的HTML文件,我想逐漸消失,當你開始向下滾動時。我當前的代碼看起來有點像這樣:

document.getElementById("myTitle").style.opacity = (75-document.scrollTop)/75;

我知道代碼的第一部分工作,因爲我已儘快設定的數值,如「0.5」和「0.75」到它,它工作正常,但當我添加我的笨蛋公式時,它停止工作。

任何想法?謝謝!

回答

3

的問題:

document.scrollTop將返回undefined,如scrollTop元素財產。

document不是一個元素,而是一個可以通過它訪問它們的接口。

(文檔元素是document.documentElement,但因爲它是指<html>元素。這個元素不滾動,所以它的價值scrollTop不會改變,不會在這種情況下工作。)


解決方案:

多數民衆贊成滾動的實際元素是<body>,所以你應該引用那在你的計算中。

嘗試將document.scrollTop替換爲document.body.scrollTop,如下面的工作示例所示。

document.addEventListener("scroll", function() { 
 
    document.getElementById("myTitle").style.opacity = (75 - document.body.scrollTop)/75; 
 
});
body { 
 
    height: 1000px; 
 
} 
 

 
#myTitle { 
 
    padding: 100px; 
 
    background-color: red; 
 
    color: white; 
 
}
<div id="myTitle"> 
 
    THIS SHOULD FADE OUT 
 
</div>

0

如果您正在使用jQuery:

document.getElementById("myTitle").style.opacity = (75 - $(document).scrollTop())/75; 

通知書的,在零下空格是很重要的!

+0

jQuery的scrollTop的不是如何工作的。如果使用jQuery,爲什麼不使用'$(selector).css()'? – charlietfl

+0

@charlietfl,我的代碼出了什麼問題?我使用'scrollTop()'而不是'css()',因爲OP在問題 –

+0

的問題中將其寫入了他/她的代碼中......您修復了缺少的'()'... css()會爲另一方...'$('#myTitle')。css('opacity',...' – charlietfl

0

每次用戶滾動時都需要更新不透明度值。只設置一次不透明度值不會在滾動時更新。您可以使用scroll事件,並且每次用戶滾動時,都會根據當前window.scrollY值(在用戶滾動時明顯改變)設置不透明度值。

瞭解events,它們真的很有用。