Question

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

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/ - 因为你可能实际上想要这样做

Javascript滚动不会停止

2 个答案: