Question

我在html页面中创建了一个导航栏，并向其中添加了Bootstrap 4类Error: non-numeric argument to mathematical function。

问题在于，它一直粘贴到顶部，直到滚动屏幕的一半，但是sticky属性不起作用，导航栏在滚动页面时向上移动。

为什么会在有限的利润范围内工作然后突然停止工作？

我尝试使用sticky-top类，我也尝试过navbar-fixed-top，但徒劳。

我的HTML position:sticky; top:0; width:100%：

navbar

我的CSS <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>：

navbar

bootnavbar.css

.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.js

.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;
    }
}

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>

在您的网站中仅使用一个容器，并在其中使用所有代码。

Answer 2

将navbar-fixed-top更改为固定顶部可能是这里的解决方法。

<nav class="navbar navbar-expand-lg navigation  fixed-top">
  <div class="container">
    ....
  </div>
</nav>

在大多数情况下，请尽量避免使用左边距和右边距。边框大小将不包括边距，因此设计可能会崩溃。如果可能，请使用填充。在响应式设计中，顶部边缘和底部底部通常没有问题。

在调整浏览器大小时，无法使用Javascript进行悬停。尝试使用

/* submenu open on hover, add css animation if you like */
@media (min-width: 768px)  {
  nav.navigation ul > li:hover > .dropdown-menu  {
    display: block;
  }
  nav.navigation ul > li:not(:hover) > .dropdown-menu  {
    display: none;
  }
}

Answer 3

是的！

我用不同的方法解决了这个问题。

由于我的网站导航栏上方有一个标头，所以我无法position: fixed进行操作，因为在访问该页面和top:0时，导航栏会将导航栏放在标题的顶部。

解决方案：

我测量了Bootstrap的sticky-top工作到的高度，然后在该高度之前（从顶部开始），我应用了一个媒体查询，该查询将position: sticky更改为position: fixed，然后导航栏在需要时排在顶部。

这是可取的，因为标题部分现在不见了。

我知道这只是一个快速修复，但是效果很好：）

Bootstrap4粘性顶部（粘性导航栏）无法正常工作

3 个答案: