jquery - 修复了带有粘性标题的某个点后的左侧导航

Question

我想制作一个带有粘性 header 的页面原型(prototype)，该 header 具有“固定”左侧导航。

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

现在，我希望“左”div 保留在滚动后粘性 header 的正下方(并保留在那里)。我怎样才能做到这一点？

Answer 1

使用 stickyfloat 插件。

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

只需将 offsetY 设置为 topnav 的高度，它就会保持在其下方。