Javascript onscroll 简单函数答案

【问题标题】：Javascript onscroll simple functionJavascript onscroll 简单函数
【发布时间】：2017-04-23 15:07:55
【问题描述】：

我对 javascript 有点陌生，我试图在滚动 div id="container" 时触发 div id="foo"，以便在滚动 id "container" 时说 "IM AWESOME" .我什至给了足够的空间来确保我可以滚动所有<br> 或添加margin-top 和bottom 但仍然无法正常工作。如果你们能帮助我，那就太棒了。 “我知道我不应该使用这么多“断线”，但它只是一个草稿代码。

var x = document.getElementById('container');
  x.onscroll = function() {myFunction()};

  function myFunction() {
  document.getElementById('foo').innerHTML = "IM AWESOME";

}

<body>
    
    <br>
     <div id="container">
         
        </div>
    
     <div id="foo">do something</div>
    <br>
</body>

【问题讨论】：

我不确定如何，但this 可能会派上用场。
developer.mozilla.org/en-US/docs/Web/API/…

标签： javascript jquery html css scroll

【解决方案1】：

这里是 jQuery 方法。您必须计算该 ID 的偏移量，如果该容器的 ID 小于 $(window).scrollTop() 则执行您的可爱。

例子：

var $container = ('.container'),
    $window = $(window).scrollTop(),

yourfunction = function(){
if($container < $window){
//run your code
}
});

$(window).on('scroll', yourfunction);

【讨论】：

【解决方案2】：

尝试设置容器的高度和宽度，然后在其中滚动。

【讨论】：

【解决方案3】：

需要使用window.pageYOffset获取当前滚动位置，并与元素相对于offsetParent节点顶部的距离进行比较。

More info here

function testScroll(ev){
    if(window.pageYOffset >= document.getElementById("foo").offsetTop){
        document.getElementById('foo').innerHTML = "IM AWESOME";
    }
}
window.onscroll=testScroll

Full demo

【讨论】：