Javascript的滚动并没有停止

嗨，大家我想要做简单的滚动共享框小部件，但它不工作。它必须停止在特殊div（停止滚动）上，但它不停止并向下滚动，直到网页页脚。任何想法为什么？Javascript的滚动并没有停止

var windw = this; 

$.fn.followTo = function (elem) { 
    var $this = this, 
     $window = $(windw), 
     $bumper = $(elem), 
     bumperPos = $bumper.offset().top, 
     thisHeight = $this.outerHeight(), 
     setPosition = function(){ 
      if ($window.scrollTop() <= (bumperPos - thisHeight)) { 
       $this.css({ 
        position: 'absolute', 
        top: (bumperPos - thisHeight) 
       }); 
      } else { 
       $this.css({ 
        position: 'fixed', 
        top: 0 
       }); 
      } 
     }; 
    $window.resize(function() 
    { 
     bumperPos = pos.offset().top; 
     thisHeight = $this.outerHeight(); 
     setPosition(); 
    }); 
    $window.scroll(setPosition); 
    setPosition(); 
}; 

$('#share_box').followTo('#stopscroll');

但它不停止在div #stopscroll上。

css文件看起来像这样：

#share_box{ 
background: none repeat scroll 0% 0% #E1E1E1; 
position: fixed; 
width: 65px; 
padding: 15px; 
border-radius: 5px 0px 0px 5px; 
left: 1.89%;}

什么想法？这里的jsfiddle http://jsfiddle.net/NCY6x/

来源

2014-03-12 Karambyto04

您是否添加jQuery？（这不是在你的jsfiddle） –

那么，在你的小提琴，你有没有实际加载jQuery，再装时，我得到一个错误说pos is not defined，我认为指的是以下行：

bumperPos = pos.offset().top;

pos不会出现在任何地方设置

编辑：

还有一些其他的国际空间站用你的脚本。看到这里的版本，我认为你想要的作品http://jsfiddle.net/R5z6j/1/

我删除了顶部的填充#stopscroll，因为它不会将元素向下移动，因此顶部位置始终设置为18px（请参阅控制台输出）

编辑2：

http://jsfiddle.net/R5z6j/5/ - 你可能会真正想要这样一轮

来源

2014-03-12 16:03:16 Alex

我从这里采取脚本：http://jsfiddle.net/Tgm6Y/1447/但它dosn't工作。 – Karambyto04

我认为这张海报正在做与你所做的相反的事情。使它成为“这是SCROOOOOOLLLL”框从顶部滚动页面，直到你到达一定的位置，然后它会粘住。 –

马修你是对的！这里是例子：http://jsfiddle.net/R5z6j/2/。我想滚动停止某些div – Karambyto04

有很多语法和代码变的失误......

我已更新小提琴工作和更简单的演示：http://jsfiddle.net/NCY6x/2/

$.fn.followTo = function (elem) { 
    var stopper = $(elem); 
    var box = this; 
    $(window).on("scroll resize", function(){ 
     var x_distance = (stopper.offset().top- box.outerHeight()); 
     if($(window).scrollTop() >= x_distance){ 
      box.css({"position": "absolute", "top": x_distance}); 
     } else { 
      box.css({"position": "fixed", "top": 0}); 
     } 
    }); 
}; 

$('#share_box').followTo('#stopscroll');

来源

2014-03-12 16:27:50 enapupe

Javascript的滚动并没有停止

回答

相关问题