Have Geek Brain

Floating side menu, make it stop at the bottom

example page

I have a floating menu that I built on the left side (green) and I made it start moving after 200px. and now I need to stop and don't go through the footer (blue). any ideas how to make my JS better?

this thing, I cannot test it on the scroll event, because of the post-scroll animation, so it needs to be done somehow differently.

So how do you make the animation stop at the end before the footer?

0


a source to share


3 answers


I solved the problem completely (hopefully so)
with the help of you guys and released
a jQuery plugin for floating sticky boxes:




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

+2


a source 


$.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();
        }
    });

};


+1


a source


In the function, $(window).scroll

you checked if the bottom position of the floating div is less than or equal to the top position of the footer element.

0


a source






More articles:


All Articles