当我们在 bootstrap 中向下滚动时，如何在顶部添加 div

Question

我创建了一个 Fiddle ，如果用户向下滚动，我想修复 nav-pills div。
我尝试使用以下代码，但它似乎无法按我的意愿工作。

 $(function() {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
  });

![在此处输入图片描述][2]

Answer 1

您可以结合使用 Offset and scrollTop 函数来了解滚动时元素的位置。使用它，您可以创建您想要的行为。我更改了您的 fiddle 以使其按照我所了解的方式工作。

Fiddle

var originalPos;
$(document).on("scroll", function(e){
    if($("#nav-wrapper").hasClass("affixed")){
        if($(document).scrollTop() <= originalPos)
            $("#nav-wrapper").removeClass("affixed");
        return;
    }

    if((originalPos = $(document).scrollTop()) >= ($("#nav-wrapper").offset().top - $("#nav-wrapper").height())){
        $("#nav-wrapper").addClass("affixed");
    }
})

当我们在 bootstrap 中向下滚动时，如何在顶部添加 div

how to affix div at top when we scroll down in bootstrap

css

jquery

twitter-bootstrap