具有垂直约束的浮动滚动Div [英] Floating Scrolling Div with vertical constraints

问题描述

我的目标是沿着这个例子， http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css /

但我想限制浮动div在另一个父div中。

alt text http：/ /img41.imageshack.us/img41/1686/72219115.png

我想要一个菜单​​div浮动在上面的浅灰色框中，但是它不应该超出它。

我看到的浮动div的任何例子都只是根据它们的位置离开窗口的顶部或底部。

解决方案

  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 
 
 //将菜单放在容器的左上角div 
 $（menu）.css（'top'，containerTop）.css（'left'，containerLeft）; 
 
 menuYloc = parseInt（$（menu）.css（top）。substring（0，$（m​​enu）.css（top）。indexOf（px）））
 
 $（window）.scroll（function（）{
 
 //如果菜单在容器中，然后将其下移
 if（$（document）.scrollTop ）> containerTop&& $（document）.scrollTop（）<（containerTop + containerHeight  -  menuHeight））
 {
 offset = $（document）.scrollTop 
 $（menu）.animate（{top：offset}，{duration：400，queue：false}）; 
} 
 
} 
}）; 
  

What I am aiming for is along the lines of the example at http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

However I would like to constraint the floating div within another parent div.

E.g.

alt text http://img41.imageshack.us/img41/1686/72219115.png

I would like a menu div to be floating in the above light grey box, but it should not go outside out of it.

Any of the examples that I have seen for floating divs have all simply based their position off the top or bottom of the window. Has anyone tried to do this like the above?

Thanks.

解决方案

After a bit more playing about, I got it working.

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});
            }

        });
    });

这篇关于具有垂直约束的浮动滚动Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！