固定的左導航後，粘滯標題的某個點

Question

我想用具有「固定」左導航的粘滯標題的頁面原型。

http://jsfiddle.net/rkr2/R7BH7/1/

HTML：

<div class="nav-container"> 
    <div class="nav"> 
     <div id="bad"> </div> 
    </div> 
</div> 

<div id = "container"> 
    <div id = "left"> </div> 
    <div id = "right"> </div> 
</div> 

JS的粘頭：

var nav = $('.nav-container'); 
$(window).scroll(function() { 
    if ($(this).scrollTop() > 200) { 
     if (!nav.hasClass('f-nav')) { 
      nav.addClass("f-nav"); 
      nav.hide(); 
      nav.slideDown("slow"); 
      $('#bad').css('background-color', 'red'); 
     } 
    } else { 
     nav.removeClass("f-nav"); 
     // nav.slideUp("slow"); 
     $('#bad').css('background-color', 'yellow'); 
    } 
}); 

現在，我想 「左」 格留權的粘頭下方後滾動（並保持在那裏）。我怎樣才能做到這一點？

Answer 1

使用stickyfloat插件。

http://dropthebit.com/demos/stickyfloat/stickyfloat.html

只需設置OFFSETY設置，但是高大的topnav是，它會留在它下面。