JavaScript滚动不会停止

Question

大家好，我正在尝试做简单的滚动共享框小部件，但它不起作用。 它必须在特殊的div（停止滚动）上停止，但是直到网页页脚才停止并向下滚动。 有什么想法吗？

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/

Answer 1

您的代码中有很多语法和变量错误。

我已经通过一个简单易用的演示更新了小提琴： 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');

Answer 2

好吧，在您的小提琴中，您实际上没有加载jQuery ，然后在加载时出现错误，提示pos is not defined ，我认为这是指以下行：

bumperPos = pos.offset().top;

pos似乎没有设置在任何地方

编辑：

您的脚本还有其他问题。 请参阅此处以获取我认为可以正常使用的版本http://jsfiddle.net/R5z6j/1/

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

编辑2：

http://jsfiddle.net/R5z6j/5/-您可能实际上希望这种方式