我有一个关于导航栏固定顶部的问题。好吧,我有一个简单的问题。我的固定导航栏涵盖了内容,例如在"关于我们"页面中,它涵盖了带有"关于我们"标题的行。
我不知道如何解决它,因为当我调整网站大小(移动设备大小)时,标题是可见的。
当然,我对其他页面(全宽和 404)中的标题有这种问题。
此外,在索引页面中,它涵盖了一些轮播滑块。
信息:
-
网站: http://testerix.site90.com/index.html
-
引导 2.3.2
让我知道,我如何在所有分辨率上修复它。
响应在页面中:
Twitter Bootstrap - 顶部导航栏阻止页面的顶部内容
添加到您的 CSS:
body {
padding-top: 65px;
}
或更复杂的解决方案,但响应迅速,如果您的导航栏更改高度(平板电脑中的ex出现在60px以上;或者不同)使用CSS和JavaScript的混合解决方案
.CSS:
#godown{
height: 60px;
}
HTML (resumen)
<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>
try class="navbar-static-top"。它仍然允许导航栏停留在顶部,但不会阻止内容。
position: sticky
而不是position: static
为我做了这个技巧。
var navHeight = $("#menu").height();
$("body").css({paddingTop: (navHeight+12)+'px'});
试试这个简单的方法。
我会这样做:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
这应该确保导航块不会向下拉伸并覆盖页面内容。
只需向内容添加一个 id 或类,然后给它一个足够高的边距,以使内容显示,而静态导航栏会阻碍它,并添加"!important"属性以使其工作.....
可以将身体顶部的填充变量设置为导航栏的高度也可以工作,随后比固定的 60/65px 值响应更快。
let padding = $("nav").height() + "px";
一个实际的例子是Bootstrap .navbar-toogler按钮,并向其添加单击事件和setTimeout函数,该函数允许更改高度,然后将新值作为paddingTop应用于正文。
j查询:
$(".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)
};
试试看。它将保留导航栏的固定属性
.navbar{
top:0;
position:fixed;
}