плавающее боковое меню, остановите его внизу

Question

пример страницы

У меня есть плавающее меню, которое я построил слева (зеленый), и я сделал это начать двигаться после 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 меньше или равна верхней позиции элемента нижнего колонтитула.