logo标签列表

Bootstrap - navbar-fixed-top 覆盖内容

twitter-bootstrapfixednavbar
23
我有一个关于navbar-fixed-top的问题。我的问题很简单，就是固定的导航栏会遮盖内容，例如在“关于我们”页面中，它会遮盖带有“关于我们”标题的行。
我不知道该如何解决它，因为当我调整网站大小（移动设备大小）时，头部是可见的。
当然，在其他页面（全宽和404）中，我也遇到了这种问题。
此外，在主页上，它还会遮盖一些轮播滑块。
信息：
- 网站：http://testerix.site90.com/index.html - bootstrap 2.3.2
请告诉我，如何在所有分辨率下都解决这个问题。
3
这个问题有几份副本。https://dev59.com/Pmgu5IYBdhLWcg3wuJSF 建议添加以下CSS： body { padding-top: 40px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } }
https://dev59.com/lmkv5IYBdhLWcg3wzj81 以下方法对我有效： 在Bootstrap 3中，将"fixed"改为"navbar-static-top"可以避免此问题，除非你需要始终显示导航栏。 - TW Scannell
8个回答
22

响应在页面中:

Twitter Bootstrap - 顶部导航栏阻挡了页面顶部内容

请将以下内容添加到您的CSS中:

body { 
    padding-top: 65px; 
}

如果你的导航栏改变高度（例如在平板电脑上出现时高达60像素，或者高度不同），可以使用CSS和JavaScript混合解决方案来实现响应式设计。
CSS:
    #godown{
   height: 60px;
}

HTML (简介)

<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...

</nav>

<!-- This div make the magic :) -->

<div class="godown-60" id="godown"></div>

<!-- the rest of your site -->
...

JAVASCRIPT：

<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position

    $("#navMenu").resize(function () {
        $('#godown').height($("#navMenu").height() + 10);
    });

    if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);

</script>
3
对我来说可行，但感觉有些投机取巧。 - John Slavick
11
尝试使用class="navbar-static-top"。它仍然允许导航栏保持在顶部，但不会阻碍内容。
3
是的，但这会停止粘性效果，所以当您向下滚动时，导航栏也会消失。 - rory
1
谢谢! 这个方法有效，但是你会失去持续的“粘滞”导航栏功能。 - Levi Maes
8

position: sticky 对我很有帮助，代替了 position: static。

2
谢谢，它起作用了！在我的情况下，<nav class="navbar navbar-expand-sm bg-secondary navbar-dark sticky-top justify-content-center">。 - Sabzaliev Shukur
1
var navHeight = $("#menu").height();
$("body").css({paddingTop: (navHeight+12)+'px'});

尝试这种简单的方法。

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
0
我会这样做：
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

这应该确保导航块不会向下延伸并覆盖页面内容。

真的不是一个解决方案。导航块确实会发生变化，你不想阻止它。 - RichieHH
0
只需为内容添加一个id或类，然后给它足够的上边距，使内容显示时不受静态导航栏的干扰，并添加"!important"属性以使其生效......
0

试一下。它将保留导航栏的固定属性。

.navbar{
  top:0;
  position:fixed;
}

0

可以将变量设置为导航栏的paddingTop高度，这样可能会更加响应式，比固定的60/65像素值更好。

let padding = $("nav").height() + "px";

一个实际的例子是Bootstrap中的.navbar-toogler按钮，通过添加点击事件和setTimeout函数，可以允许高度改变，然后将新值应用为body的paddingTop。
jQuery:
$(".navbar-toggler").click(function(){
            setTimeout(function(){
                let padding = $("nav").height() + "px";
                $("body").css("paddingTop", padding)
            }, 500)
        })

纯JS：

document.querySelector(".navbar-toggler").onclick = function(){
            setTimeout(function(){
                let padding = document.querySelector("nav").offsetHeight + "px";
                document.body.style.paddingTop=padding;
            }, 500)
        };
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接