document.body.scroll顶端值停留在0

document.body.scrollTop value stuck at 0

本文关键字:停留在 body scroll document      更新时间:2023-09-26

当用户滚动一定距离时,我想更改一些文本。但是,当我滚动时,document.body.scrollTop的值保持在0

var scroll = document.body.scrollTop;
if (scroll < 50) {
    document.write("A");
} else {
    document.write("B");
}

当检查日志时,scroll的值从不从0移动,因此滚动时文本从不从A切换到B。感谢您提前提供的帮助。

编辑:前三个答案似乎都不适合我。我想我应该提供一些上下文。

建立我的设计作品集网站。在此处查看早期版本。当用户向下滚动页面时,我希望能够将横幅中的单词"designer"更改为其他描述符单词,但似乎无法收听当前滚动位置。

为什么要将该脚本内联在横幅中?为什么不在现有的$(window).scroll(function () {中实现您的逻辑呢?因为该事件似乎在滚动时正确设置了不透明度。

只需添加:

if(scrollTop < 50){ 
   $('#banner h1').text("My name is John. I'm a designer"); 
} else { 
   $('#banner h1').text("My name is John. I'm a thinker"); 
}

实时演示

if(document.attachEvent){
    document.attachEvent('onscroll', scrollEvent); 
}else if(document.addEventListener){
    document.addEventListener('scroll', scrollEvent, false); 
}
function scrollEvent(e){
    var scroll = document.body.scrollTop;
    var text = null;
    if (scroll < 50) {
        text = document.createTextNode('A');
    } else {
        text = document.createTextNode('B');
    }
    document.body.appendChild(text);
}

尽管与你的问题无关,但你应该尽可能远离document.write。请参阅为什么document.write被视为";不良做法"?了解更多详细信息。

这应该做到。"document.dococumentElement.scrollTop"是一个IE变体。应该可以跨浏览器工作。

window.onscroll = function() {
  var scroll = window.scrollY || document.documentElement.scrollTop;
  if (scroll < 50) {
    document.write("A");
  } else {
    document.write("B");
  }    
}

演示FIDDLE

var el = $('.test');
//alert(el.scrollTop());
el.on('scroll', function(){
    if(el.scrollTop()>50){
  alert(el.scrollTop());
    }
});

试试这个。