【发布时间】：2018-07-08 16:28:40
【问题描述】：
我在使用 Bootstrap 4 的“固定顶部”时遇到问题。它在我桌面上的导航栏上运行。但是，当导航栏折叠时使用它时，它不会将导航栏固定在绝对顶部。折叠时滚动时，导航栏将在固定之前部分消失。大约 50% 的导航栏会在固定在顶部之前消失。向上滚动时，导航栏会重新出现。我将链接到一个简短的视频； https://drive.google.com/file/d/1Lxr7Qw83Co_AYqaMsLOILglhqKjiQbF8/view
<div>
<nav id="mainNav" change-class class="navbar fixed-top navbar-expand-lg navbar-transparent">
<!-- Logo -->
<a class="navbar-brand text-white" href="#"><span class="logo-script">Some</span><span class="logo-block">Brand</span></a>
<!-- Toggler -->
<button class="navbar-dark navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="navToggle">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white navbar-link-custom" href="#!/view1">SIGN IN</a>
</li>
<li class="nav-item">
<a class="nav-link text-white navbar-link-custom" href="#">REGISTER</a>
</li>
<!-- Logged In Links -->
<div class="dropdown">
<a href="" class="nav-link text-white navbar-link-custom dropdown-toggle" type="text" id="profileDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WELCOME CHRIS
</a>
<div class="dropdown-menu dropdown-menu-right" style="padding-left: 2px; padding-right: 2px" aria-labelledby="profieDrop">
<button class="dropdown-item-custom navbar-link-custom" type="button">My Profile</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item-custom navbar-link-custom" type="button">Logout</button>
</div>
</div>
</ul>
</div>
我也在使用 AngularJS 为滚动的导航栏添加一些颜色，但我很肯定这与它无关，因为它似乎在 lg 和中等屏幕上工作正常，但顶部位置固定在小屏幕上被截断。
感谢任何反馈。
编辑：似乎我用于标题的这段代码在某种程度上造成了这个问题的一部分。这是该代码；
<div class="header">
<div class="row h-100">
<div class="col-12 my-auto">
<h1 class="text-white text-center logo-block">
NOT ALL <span class="logo-script">Brands</span> ARE CREATED EQUALLY
</h1>
</div>
</div>
.header {
background: #7F00FF; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #ff00ff 20%, #6705ff 200%); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #ff00ff 20%, #6705ff 200%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 100vh;
}
它的工作方式.. 导航栏已加载，在它下面我有一个页面，其中包含上面的代码以加载标题。当我删除标题块时，行为仍然存在，但移动量大大减少。
【问题讨论】：
-
您要么想出一种检查视频中呈现的代码的方法，要么创建一个minimal reproducible example。假设您需要帮助。
-
我发布了有问题的代码？我无法使用 JSFiddle 进行复制，因为它可以在 iframe 中工作，而且我无法像在移动设备上那样折叠屏幕尺寸。
-
你确定你知道“可验证”是什么意思吗？这意味着您的 sn-p 必须有一个“运行”按钮，并且该问题应在问题中包含的 sn-p 中重现。确保从 CDN 链接每个必需的资源以重现问题。还使用它发生的详细信息参考设备/浏览器更新问题。原则上，问题不应该需要评论讨论才能清楚。 您发布的代码不足以重现所描述的问题，因此无法确定原因。
标签： html css twitter-bootstrap bootstrap-4