Question

我的导航栏最初没有固定在顶部，而我在这里要做的是当我滚动偏移时，例如150像素，导航栏固定在顶部，固定位置，它使用页内锚点链接到页面的不同部分，顶部固定的词缀导航栏将突出显示正确的页面锚点区域（scrollspy？）

我的问题是，在导航栏固定到顶部后，固定导航栏会阻止锚点指向页面上的正确位置，因为某些内容隐藏在导航栏后面。

我已经研究过这个问题已经有一段时间了，并且看到了很多关于向身体添加填充顶部的建议，但同样，top-nav还没有修复，直到通过滚动触发贴图。在向身体添加填充

后，导航仍然无法正确突出显示

我已尝试过以下部分的解决方案 How do I set the offset for ScrollSpy in Bootstrap?

我很难解释所以我会在这里发布一些截图。

这是滚动和词缀之前的屏幕截图 enter image description here

这是导航栏固定到顶部后的屏幕截图，我滚动到页面内容 The Issue after the affixed fixed top nav

我希望它如何运作 enter image description here

以下是我的代码。

<body data-spy="scroll">
  <!--This is the nav bar getting affixed to the top-->
  <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
        <li><a href="#section1">About</a></li>
        <li><a href="#section2">Method</a></li>
        <li><a href="#section3">Findings</a></li>
        <li><a href="#section4">Final</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.navbar -->

这是内容区域

<div class="mainContent">
  <div class="row">
    <div class="col-lg-7 col-md-7">
      <div id="section1">
        <h3>About the Project</h3>
      </div>
      <h4>Read the <a href="./assets/Preliminary_Avvo.pdf">Preliminary Proposal</a></h4>
    </div>

，其余的html只是第2节，第3节和第4节

中包含的内容

我的CSS

.navbar-custom {
  border:none;
  background-color: #FFFFFF;
  font-weight:600;
  text-transform:uppercase;
  border-width:0;
}
.navbar-custom li{
  float:none;
}
.navbar-custom  .navbar-nav>li>a {
  color: #ddd;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom     .navbar-nav .active a  {
  background-color:#902c00;
  color:#FFFFFF !important;
}
#nav {
  width: 100%;
  position:static;
  top:-32px;
}
#nav.affix {
  position: fixed;
  top: 0;
  z-index:10;
  width:940px;
}

JS

/* affix the navbar after scroll below header */
$('#nav').affix({
  offset: {
    top: 150
  }
});

/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })

Answer 1

这是一个代码片段，可以防止你有效果：

var navOffset = parseInt($('body').css('padding-top'));
$('body').scrollspy({ target: '#affix-nav', offset: navOffset+10 });
$('.navbar a').click(function (event) {
  var scrollPos = jQuery('body').find($(this).attr('href')).offset().top - navOffset;
  $('body,html').animate({ scrollTop: scrollPos}, 500, function () {});
  return false;
});

效果有效的代码comes from this page。

Answer 2

解决了它。即使Quick-dirty修复有效，

window.addEventListener("hashchange", function() { scrollBy(0, -50) })

相信这个家伙：https://github.com/henrik

贴上顶部导航栏scrollspy问题，页面内容叠加

2 个答案: