Question

我正在使用Bootstrap构建this website。你可以看到我有一个固定的顶部导航栏，主页是一个“滚动”页面。我需要的是突出显示这两个活跃的锚点：

<li><a class="page-scroll" href="#ark">Architektur</a></li> <li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>

使用此CSS样式：

background-color: #ffffff; color: #009ee0 !important;

我尝试使用this但没有结果。

任何提示？

编辑：

我刚添加了这个：

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

并且在我点击

后立即行动

<li><a class="page-scroll" href="#ark">Architektur</a></li> <li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>

a链接具有灰色背景。但是，一旦我点击某个地方，那么看起来很完美。是JS的问题吗？

Answer 1

好的，所以这里有一些问题需要解决。首先，您需要添加body scrollspy标记。所以它看起来像这样：

<body  data-spy="scroll" data-target="#navbar" data-offset="50">

然后你有两次id #navbar。如果您将窗口调整为移动尺寸，您将看到可折叠菜单不会崩溃。这是因为您将数据目标设置为#navbar，并且您已将此说明两次。它与scrollspy没有任何关系，但我想我会给你一个抬头以保存你未来的头痛，我们会设置你的按钮以瞄准.navbar-collapse。然后从除了包含锚标记的href之外的所有内容中删除页面滚动类。长话短说，您的导航栏应如下所示：

<nav id="navbar" class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a class="selected" href="http://develop.nowcommu.myhostpoint.ch/">Home</a></li>
        <li><a class="page-scroll" href="#ark">Architektur</a></li>
        <li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>  
        <li><a href="/table.html">Wohnungen</a></li>
        <li><a href="/lage.html">Lage</a></li>
        <li><a href="/galerie.html">Galerie</a></li>
        <li><a href="/kontakt.html">Kontakt</a></li>  
        </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

然后我总是想给出以下jquery代码，因为它让你可以更好地控制scrollspy插件，比如动画的速度有多快，并且可以更好地控制顶部偏移，所以也可以添加它：

$(".navbar a.page-scroll").on('click', function(event){
  event.preventDefault();
  var hash = this.hash;
  $('html, body').animate({
    scrollTop: $(hash).offset().top - 50
  }, 800, function(){
    window.location.hash = hash;
  });
});

现在，您的正文定位于#navbar，您的可折叠菜单将正常工作，您的标记将是正确的。

这是一个向你展示这个工作Fiddle

的小提琴

Answer 2

只需在你的css中添加它

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
  background: yellow !important;}

你已经完成了，

Bootstrap固定导航和视差：突出显示不起作用

2 个答案: