Question

我遇到使用＆＃39; fixed-top＆＃39;的问题。使用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;

}

这种方式有效..导航栏已加载，在其下面我有一个页面，其中包含上面的代码以加载标题。当我删除标题栏时，行为仍然存在，但运动量大幅减少。

Answer 1

我刚刚对您的代码进行了一些测试，发现您的HTML代码段无效。

可能是导致问题的原因，因为在修复错误后我进行了大量测试，但无法检测到视频中显示的行为。我也改用了Galaxy S5（只是为了很好的衡量标准，因为这是你在视频中使用的内容），并且在所有情况下，导航栏仍然坚如磐石。您的视频中没有显示任何行为。

这是我使用的有效工作代码（点击＆＃34;运行代码段＆＃34;按钮，然后展开到全屏进行测试）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav id="mainNav" change-class class="navbar fixed-top navbar-expand-lg navbar-transparent bg-primary">

    <!-- 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>
</nav>

<div class="container" style="margin-top: 90px;">
    <div class="row">
        <div class="col">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

＆＃13;

Bootstrap 4固定顶部无法在移动设备

1 个答案: