Question

我已经按照有关如何在BS4中使用Scrollspy的文档进行了操作，但是它没有用，所以我该如何解决呢？

我的身体有posistion: relative

这是我的身体标签：

<body data-spy="scroll" data-target=".navbar">

这是导航栏的HTML：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">

        <a class="navbar-brand" href="/">
            <img src="/images/logo_placeholder.jpg" width="90" height="45" class="d-inline-block align-top" alt="">
            Jalinen
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Nieuws</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Diensten</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Calamiteiten</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Gallerij</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

为什么不起作用？

注意：

什么都不起作用。

导航栏甚至不会粘在页面顶部。

Answer 1

确保您使用fixed-top将导航栏附加到顶部

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  ..
</nav>

和身体标签：

<body data-spy="scroll" data-target="#navbar1" data-offset="70">

Bootstrap 4 Scrollspy Demo

<强> 编辑： Bootstrap 4.0.0

中navbar-toggleable-md已更改为navbar-expand-lg

Answer 2

您的内容部分必须具有唯一ID（#about），该ID已连接到导航中的锚点。（您的#home ID仅有效）

正确：

            <li class="nav-item active">
                <a class="nav-link" href="#home">Home </a>
            </li>

错：

            <li class="nav-item">
                <a class="nav-link" href="#">Nieuws</a>
            </li>

Answer 3

我的BS4粘性顶部导航栏开始向上滚动，向下滚动时消失。删除了下面出于某些目的添加的CSS，然后再次工作。

body, html {
    height: 100%;
}

Answer 4

Bootstrap 3.3.7 将 <!DOCTYPE HTML> <html> <head> <title>test</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> </head> <body ng-app="app"> <ng-view></ng-view> <script> // Creating Routes (ngRoute) var app = angular.module('app', ['ngRoute']); app.config(function($routeProvider) { $routeProvider.when("/", { templateUrl : 'test.html', controller : 'postcontroller' }).when("/uploadPath", { templateUrl : 'test1.html', controller : 'uploadPath' }).otherwise({ redirectTo : "/" }); }); // Creating controller app.controller("uploadPath", function($scope, $location) { $scope.passthrough = function() { $location.path('/uploadPath') }; }); app.controller('postcontroller', function($scope, $http, $location) { // be used to decide for showing PostResults $scope.postDivAvailable = false; // be used for decide for showing GetResults $scope.getDivAvailable = false; $scope.submitForm = function() { // post URL var url = $location.absUrl() + "api/config/save"; // prepare headers for posting var config = { headers : { 'Content-Type' : 'application/json', 'Accept' : 'application/json' } } // prepare data for post messages var data = { xx: $scope.xx, yyyy: $scope.yyyy, zzzz: $scope.zzzzz }; // do posting $http.post(url, data, config).then(function(response) { $scope.postDivAvailable = true; $scope.postCust = response.data; }, function error(response) { $scope.postResultMessage = "Error Status: " + response.statusText; }); // reset data of form after posting $scope.xx= ''; $scope.yyyy= ''; $scope.zzzzz= ''; } }); </script> </body> </html> 类放在 active 元素上，而 Bootstrap 4 将 li 类放在 active 标签上。确保相应地设置样式。
对于粘性导航栏，将 a 类分配给导航栏。

Answer 5

Class active .active 是解决方案。只需将其添加到您的 css 样式中即可：

.nav-link.active {
background-color: white; 
color: #f4511e;           
}

这 .active 有所作为。随意更改 background-color 和 color。

同样重要的是设置：

body {position: relative}

Bootstrap 4 - Scrollspy无效

5 个答案: