Плавающая прокрутка Div с вертикальными ограничениями

Question

То, к чему я стремлюсь, соответствует примеру в http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

Однако я бы хотел ограничить плавающий div внутри другого родительского div.

* 1006 Е.Г. *

альтернативный текст http://img41.imageshack.us/img41/1686/72219115.png

Я бы хотел, чтобы div меню плавал в вышеупомянутом светло-сером квадрате, но он не должен выходить наружу.

Любой из примеров, которые я видел для плавающих элементов div, просто основывал свое положение сверху или снизу окна. Кто-нибудь пытался сделать это, как указано выше?

Спасибо.

Answer 1

вам нужно определить максимальную высоту прокрутки (maxscrollvalue) на основе вашего div обтекания или фиксированного значения, а затем изменить код следующим образом:

$(document).ready(function(){  
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
    $(window).scroll(function () {   
        var offset = menuYloc+$(document).scrollTop()+"px";  
        //new code here
        if(offset > maxscrollvalue){
            offset = maxscrollvalue;
        }
        $(name).animate({top:offset},{duration:500,queue:false});  
    });  
});   

Все, что он делает, это проверяет, не превышает ли рассчитанное отклонение ваше максимальное значение, а если оно больше, просто установите его на максимальное значение.

надеюсь, это поможет. Джош

Answer 2

После того, как я немного поигрался, я заработал.

var menu = "#floatMenu";
    var menuYloc = null;

    $(document).ready(function(){

        var containerTop = $("#container").position().top;
        var containerLeft = $("#container").position().left;
        var containerHeight = $("#container").innerHeight();
        var menuHeight = $(menu).innerHeight();

        //Position the menu at the top-left of the container div
        $(menu).css('top', containerTop).css('left', containerLeft);

        menuYloc = parseInt($(menu).css("top").substring(0,$(menu).css("top").indexOf("px")))

        $(window).scroll(function () {

            //If the menu is within the container then move it down
            if($(document).scrollTop() > containerTop && $(document).scrollTop() < (containerTop + containerHeight - menuHeight))
            {
                offset = $(document).scrollTop()+"px";
                $(menu).animate({top:offset},{duration:400,queue:false});
            }

        });
    });