修复了引导程序中的导航栏答案

【问题标题】：Fixed a navbar from bootstrap修复了引导程序中的导航栏
【发布时间】：2015-08-28 19:32:33
【问题描述】：

我使用属性navbar-fixed-top 将我的导航栏固定在顶部。但我还有一个我们看不到的固定元素。

这是我的固定导航栏，在它下面是我想看到的固定元素。

发生的事情是我的元素（只是称之为“线”）由选项固定，但导航栏的位置不是绝对的，所以线通过导航栏下方，当我向下滚动时，线很好已修复，但它被导航栏隐藏了。我不知道是否清楚，但我希望这两个元素被粘合而不是叠加。

我该怎么办？

编辑：

我的 jsfiddle：http://jsfiddle.net/5Zv8h/13/

如果您尝试删除 enavbar，您会看到第一行停留在页面顶部。使用导航栏，它是隐藏的。

【问题讨论】：

请与我们分享您的代码（更好的 JFiddle 或 Plunker），以便我们了解您目前在做什么。
您的“行”需要在顶部留出更多空间，因为您使用 top: 0px;你需要像 top: 100px; 这样的东西并将其调整到引导导航栏的高度；）
@Hammster 我试过了，但它只是在导航栏和线路之间形成了一个界限。当我滚动时，该行仍然被导航栏隐藏。
Lison，您能创建一个小提琴（例如：bootply.com）来重现您的问题吗？帮您解决会更快，而不是猜测图片上有什么....
@YenneInfo 我正在尝试创建一个，但做起来有些困难^^''

标签： html css twitter-bootstrap

【解决方案1】：

我已编写脚本来解决此问题，请将其添加到您的代码中：

var navheight = $(".navbar-fixed-top").innerHeight();
var offtop = $(".ht_clone_top").offset().top;
$(window).scroll(function(){
    var scrolltop = $(window).scrollTop();
    if(scrolltop + navheight >= offtop){
        if(!($(".ht_clone_top").hasClass("affixed"))){
            $(".ht_clone_top").addClass("affixed");
        }
        if(offtop>= scrolltop){
            console.log("now");
            $(".ht_clone_top").css({
                "top": scrolltop - 40
            });
        } else {
            $(".ht_clone_top").css({
                "top": 50
            });
        }
    } else {
        $(".ht_clone_top").removeClass("affixed");
        $(".ht_clone_top").css({
            "top": 0
        });
    }
});

css

.affixed {
    z-index: 99999;
    position: absolute;
}

演示： http://jsfiddle.net/5r9p380n/2/

【讨论】：