Question

当使用pageyoffset滚动页面超过一定距离时，我尝试更改某些CSS样式。我对javascript很新，所以不知道如何正确编写它。

非常感谢任何帮助。

＆＃13;

if ((window.pageYOffset) >= 240) {
    var hero = document.getElementById('hero')
    hero.style.position = "fixed"
    hero.style.top = "-140px"
}

＆＃13;

Answer 1

你的逻辑完全正确，你只需将你的内容包裹在一个window.onscroll = function() { }内。

请注意，在下面的示例中，我将两个样式更改替换为仅添加背景的样式更改，以展示此工作。

window.onscroll = function() {
  if ((window.pageYOffset) >= 240) {
    var hero = document.getElementById('hero')
    //hero.style.position = "fixed";
    //hero.style.top = "-140px";
    hero.style.background = "green";
  };
}

#one {
  height: 500px;
}

<div id="one"></div>
<div id="hero">Hi</div>

请注意，一旦完成了所需的行为，您还应该unbind滚动功能，这可以使用jQuery的.unbind()方法完成：

$(window).unbind('scroll');

如果您想坚持使用vanilla JavaScript，也可以使用addEventListener()和removeEventListener()。

希望这有帮助！：）

Answer 2

如果不告诉我，你会得到这个想法

＆＃13;

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    console.log(scroll);
    if (scroll > 800) {
    $('#hero').css('background-color','yellow');
}
else if(scroll<800){
$('#hero').css('background-color','red');
}
});

＆＃13;

div{
  width:50px;
  height:50px;
}
#hero{
  height:1500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hero' style='background-color:red'>

</div>
<div style='background-color:blue'>

</div>

＆＃13;

Answer 3

您需要添加一个事件来检查scoll位置，如：

window.addEventListener('scroll', checkScrollPosition);

然后将上面的代码放在一个函数中来处理事件

function checkScrollPosition(){
   if ((window.pageYOffset) >= 240) {
   var hero = document.getElementById('hero')
   hero.style.position = "fixed"
   hero.style.top = "-140px"
 }
}

检查window.pageYoffset是否>> =设置值？

3 个答案: