2017-07-28 74 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,它们真的很有用。