javascript - Bootstrap4 sticky-top(粘性导航栏)无法正常工作

Question

我在我的 html 页面中制作了一个导航栏，并向其添加了 Bootstrap 4 类 sticky-top。

问题是，它会一直粘在顶部，直到屏幕滚动到一半，但随后粘性属性不起作用，并且导航栏会随着页面滚动而向上移动。

为什么会发生它在有限利润下工作然后突然停止工作的情况？

我尝试使用 navbar-fixed-top 类，我也试过 position:sticky;顶部:0； width:100%，但徒劳无功。

我的 HTML navbar:

<nav class="navbar navbar-expand-lg navigation navbar-fixed-top" style="position:sticky; top: 0; width:100%;" id="bootnavbar">
      <div class="container">
            <a class="navbar-brand" href="index.php"><i class="fas fa-home"></i></a>
            <button class="navbar-toggler  ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="font-size:0.85em;">
                  <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">

                        <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    About Us
                              </a>
                              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="about.php">About</a></li>
                                    <div class="dropdown-divider"></div>
                                    <li><a class="dropdown-item" href="boac.php">Board of Advisory Comittee</a></li>
                                    <li><a class="dropdown-item" href="bos.php">Board of Studies</a></li>
                                    <div class="dropdown-divider"></div>
                                    <li><a class="dropdown-item" href="admission.php">Admission</a></li>
                                    <li class="nav-item dropdown">
                                          <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Academic
                                          </a>
                                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
                                                <li><a class="dropdown-item disabled" href="faculty.php">Faculty</a></li>
                                                <li><a class="dropdown-item" href="activities.php">Activities</a></li>
                                          </ul>
                                    </li>
                                    <li><a class="dropdown-item" href="facilities.php">Facilities</a></li>
                              </ul>
                        </li>

                        <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Courses
                              </a>
                              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="regular_courses.php">Regular Courses</a></li>
                                    <li><a class="dropdown-item" href="short_term_courses.php">Short Term Courses</a></li>
                              </ul>
                        </li>

                        <li class="nav-item">
                              <a class="nav-link" href="gallery.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Gallery
                              </a>
                        </li>

                        <li class="nav-item">
                              <a class="nav-link" href="placements.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Training & Placements
                              </a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="alumni.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Alumni
                              </a>
                        </li>

                        <li class="nav-item">
                              <a class="nav-link" href="feedback.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Feedback
                              </a>
                        </li>

                  </ul>
            </div>
      </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootnavbar.js"></script>
<script>
      $(function() {
            $('#bootnavbar').bootnavbar();
      })
</script>

我的 CSS navbar:

.navigation {
    background: #020031;
    padding: 0px 23px;
    font-size: 17px;
    z-index: 500;
    box-shadow: 0px 10px 15px -9px;
}

.navbar-brand {
    color: #fff;
}

.navbar-brand:hover {
    color: #fff;
}

.navigation .nav-item .nav-link {
    color: #fff;
    margin-right: 10px;
    padding: 16px;
    text-transform: capitalize;
    font-weight: 500;
}

.navigation li a:hover {
    background: #f6783a;
}

.custom-toggler.navbar-toggler {
    border-color: rgb(255, 255, 255);
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-switch {
    display: none;
}

.nav-section {
    background: #020031;
}

.nav-section .nav-right {
    float: right;
    padding-top: 23px;
}

.nav-section .nav-right a {
    color: #fff;
    margin-left: 30px;
    font-size: 16px;
}

.main-menu {
    list-style: none;
}

.main-menu li {
    display: inline;
}

.main-menu li a {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 25px 20px;
    margin-right: -5px;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.main-menu li a:hover {
    background: #f6783a;
}

.main-menu li.active a {
    background: #f6783a;
}

bootnavbar.css

.dropdown-menu {
    margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
    vertical-align: middle;
    border-left: 4px solid;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
    left: 100%;
    top: 0%;
    margin:0 20px;
    border-width: 0;
}

.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
    background: #007bff;
    color: white;
}
.dropdown-menu > li.show > a{
    color: white;
}

@media (min-width: 768px) {
    .dropdown-menu .dropdown .dropdown-menu {
        margin:0;
        border-width: 1px;
    }
}

bootnavbar.js

(function($) {
    var defaults={
        sm : 540,
        md : 720,
        lg : 960,
        xl : 1140,
        navbar_expand: 'lg'
    };
    $.fn.bootnavbar = function() {

        var screen_width = $(document).width();

        if(screen_width >= defaults.lg){
            $(this).find('.dropdown').hover(function() {
                $(this).addClass('show');
                $(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
                    $(this).removeClass('animated fadeIn');
                });
            }, function() {
                $(this).removeClass('show');
                $(this).find('.dropdown-menu').first().removeClass('show');
            });
        }

        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
          if (!$(this).next().hasClass('show')) {
            $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
          }
          var $subMenu = $(this).next(".dropdown-menu");
          $subMenu.toggleClass('show');

          $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
            $('.dropdown-submenu .show').removeClass("show");
          });

          return false;
        });
    };
})(jQuery);

Answer 1

我刚刚看到这个问题，它已经晚了，但它可能对其他人有帮助。使用两个 container-fluid 或 container 导致该问题。

示例:

<div class="container-fluid">
   etc...
</div>

您的导航栏将一直工作到容器结束，然后停止工作。

<main class="container-fluid" role="main">
   etc...
</main>

所以，你的 html 代码应该是这样的:

<div class="container-fluid">
  etc...
    <main role="main">
       etc...
    </main>
</div>

在您的站点中只使用一个容器，所有代码都在其中。