Javascript onscroll 简单函数

标签 javascript jquery html css scroll

我是 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>

最佳答案

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

例子:

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

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

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

关于Javascript onscroll 简单函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43572793/

相关文章:

javascript - angular 2 NgFor 只支持绑定(bind)到 Iterables 比如 Arrays

javascript - 根据 Javascript 变量值从 PHP 获取数据到 Javascript

javascript - "starts with"选择器 : [^=] 相反的 jQuery

javascript - HTML/JS "Lock/Hide"内容直到日期设置

javascript - 在 Firefox 中出现 "undeclared character encoding"错误

JavaScript/JQuery --> 每次单击与该函数链接对应的函数时都重新运行该函数

javascript - 如何在点击后延迟js功能

javascript - 使用 addEventListener 识别 chrome 扩展中元素的 id

Javascript 在 IE8 中工作,但在 chrome 和 safari 以及其他最新的浏览器中不工作

html - 使用 CSS 的页面方向