如何在Bootstrap 4中实现包含品牌栏与导航栏的固定顶部头部

解决方案 #

你当前的问题是仅为导航栏添加了fixed-top固定属性，brand区块所属的外层header没有固定，所以滚动时会跟随页面位移。按以下步骤修改即可：

• 将fixed-top属性从<nav>元素移动到外层的<header>元素上，同时给header加上w-100类保证宽度铺满视口，删除导航栏原有margin-top: 60px的内联样式
• 给<body>设置和header总高度相等的padding-top，避免固定定位的头部遮挡页面主体内容（fixed定位元素会脱离正常文档流，不占据页面原有高度空间）
• 如果你的header高度会随响应式布局变化，可以加一段JS动态计算body的顶部内边距，适配不同尺寸的设备

配套代码示例 #

自定义CSS样式

/* 也可以直接把padding-top样式写在body标签的内联样式里 */
body {
  /* 请根据你的header实际总高度调整数值 */
  padding-top: 120px;
}
/* 给header加默认背景，避免滚动时页面内容透上来 */
#header {
  background: #fff;
}

修改后的HTML结构

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- 给外层header加fixed-top和w-100类 -->
<header id="header" class="fixed-top w-100">
        <section class="brand">
            <div class="row bg-primary text-light pt-4">
                <div class="col-md-6 pl-5">
                    <p> sjkddjfhsdjdhfsddjkfh weuirrhweiueihruiwe weuirhuiweihruh wuierhiuweh rhweuirui sjkdfkhsdjkfh</p>
                </div>
            </div>
        </section>
        <!-- 移除nav上的fixed-top类和margin-top内联样式 -->
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark-header" id="main-nav">
            <div class="container">
                <img src="img/Logo.png" class="img-responsive" alt="" style="width:250px;">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

可选：动态计算顶部内边距的JS代码

// 页面加载完成后计算header高度
window.addEventListener('load', function() {
  const headerHeight = document.getElementById('header').offsetHeight;
  document.body.style.paddingTop = headerHeight + 'px';
});
// 窗口尺寸变化时重新计算
window.addEventListener('resize', function() {
  const headerHeight = document.getElementById('header').offsetHeight;
  document.body.style.paddingTop = headerHeight + 'px';
});

内容的提问来源于stack exchange，提问作者Alan Pauil