Question

example page

我有一个浮动菜单，我已经建在左侧（绿色），我已经让它在200像素之后开始移动。现在我需要停下来而不是越过页脚（蓝色）区域。任何想法如何使我的JS更好？

这个东西是，我不能在滚动事件上检查这个，因为动画滚动后继续，所以它需要在其他地方完成。

那么如何让动画在页脚之前停止？

Answer 1

我完全解决了这个问题（希望如此）
在你们的帮助下，并释放
一个用于浮动粘性框的jQuery插件：

http://plugins.jquery.com/project/stickyfloat

Answer 2

$.fn.menuFloater = function(options) {
    var opts = $.extend({ startFrom: 0, offsetY: 0, attach: '', duration: 50 }, options);
    // opts.offsetY
    var $obj = this;
    $obj.css({ position: 'absolute' /*, opacity: opts.opacity */ });


    /* get the bottom position of the parent element */
    var parentBottomPoint = $obj.parent().offset().top + $obj.parent().height() ; 
    var topMax = $obj.parent().height() - $obj.innerHeight() + parseInt($obj.parent().css('padding-top')); //get the maximum scrollTop value
    if ( topMax < 0 ) {
        topMax = 0;
    }

    console.log(topMax);

    $(window).scroll(function () { 
        $obj.stop(); // stop all calculations on scroll event
        //  console.log($(document).scrollTop() + " : " + $obj.offset().top);

        /* get to bottom position of the floating element */
        var isAnimated = true;
        var objTop= $obj.offset().top;
        var objBottomPoint = objTop + $obj.outerHeight();

        if ( ( $(document).scrollTop() > opts.startFrom || (objTop - $(document).scrollTop()) > opts.startFrom ) && ( $obj.outerHeight() < $(window).height() ) ){
            var adjust;
            ( $(document).scrollTop() < opts.startFrom ) ? adjust = opts.offsetY : adjust = -opts.startFrom + opts.offsetY;
            // and changed here to take acount the maximum scroll top value
            var newpos = ($(document).scrollTop() + adjust );
            if ( newpos > topMax ) {
                newpos = topMax;
            }
            $obj.animate({ top: newpos }, opts.duration, function(){ isAnimated = false } );
        }
        else {
            $obj.stop();
        }
    });

};

Answer 3

在$(window).scroll函数中，您检查了浮点div的底部位置是否小于或等于页脚元素的顶部位置。

浮动侧面菜单，让它停在底部

example page

3 个答案: