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

Question

Что я стремлюсь вдоль линий, например при http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

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

E.g.

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

Я хотел бы меню DIV плавающим в вышеприведенном светло-серой коробке, но она не должна выходить за пределы из него.

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

Спасибо.

Answer 1

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

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

     }); 
    }); 

Answer 2

вам нужно определить максимальную высоту прокрутки (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}); 
    }); 
}); 

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

надеюсь, что это поможет. Josh