【问题标题】:Run javascript when scrolled down向下滚动时运行 javascript
【发布时间】:2015-04-06 14:20:54
【问题描述】:

我无法让我的 javascript 工作。它应该在“用户”向下滚动 2 像素但没有任何反应时运行。当我删除滚动功能时,一切正常,所以我写错了什么,或者为什么它不工作?

HTML

<div id="report"></div>
   <div style="position:relative;">
   <img id="myImage" src="test.svg" style="margin-left:200px; width:100px;" />
</div>

Javascript

(window).scroll(function() {
    if($(window).scrollTop()  > 2) {
        var animate, left=0, imgObj=null, report = document.getElementById('report'), i=0;
        function init(){
            imgObj = document.getElementById('myImage');
            imgObj.style.position= 'absolute'; 
            imgObj.style.top = '240px';
            imgObj.style.left = '-300px';
            imgObj.style.visibility='hidden';
            moveRight();
        } 
        function moveRight(){
            left = parseInt(imgObj.style.left, 10);
            if (10 >= left) {
                imgObj.style.left = (left + 5) + 'px';
                imgObj.style.visibility='visible';

                animate = setTimeout(function(){moveRight();},20); // call moveRight in 20msec
                //stopanimate = setTimeout(moveRight,20);
            } else {
                stop();
            }
            //f();
        }       
        function stop(){
            clearTimeout(animate);
        }
        // starting
        window.onload = function() {init();};
    }
});

【问题讨论】:

  • 我建议用这个创建一个fiddle。我还想知道您是否需要在(window).scroll 之外拥有函数,以便可以正确调用init() 函数。 (我也不同意投反对票的人。这个问题可以通过反馈轻松解决)

标签: javascript html


【解决方案1】:

这是小提琴,它有效!

http://jsfiddle.net/df6g497p/6/

// you forgot the $ <--- this is all i changed 
$(window).scroll(function() {

【讨论】:

  • 我完全忽略了一个简单的语法问题。很好,+1,谢谢你的小提琴。在 Chrome 中,图像变得疯狂,但这似乎是函数本身应该做的。
  • @JClaspill 是的,我确实没有触及动画例程本身,那里可能有很多建议:D
  • Excuse me..如何让图片将内容向下推送而不超过?
  • @Anton 只需使用position:relative 而不是position:absolute,因为您可以在fiddle 中尝试
  • @Anton 我在 safari 上测试过,请详细说明现在的问题,或者打开一个新问题
猜你喜欢
  • 1970-01-01
  • 2010-12-19
  • 1970-01-01
  • 1970-01-01
  • 2015-11-01
  • 2020-08-09
  • 2015-07-17
  • 2023-04-10
  • 1970-01-01
相关资源
最近更新 更多