Javascript HTML，JS：滚动到div不可靠，导航栏折叠

我在一个网站上工作，导航栏在向下滚动时会折叠并变得不透明。这导致了一个问题，即在页面下方单击指向某个div的链接会导致该div的顶部转到页面的顶部，而不是导航栏的底部。该网站位于。有没有什么方法可以在页面顶部抵消div的滚动，使其整齐排列，或者在向下滚动时“预测”并考虑导航栏的高度？ 完整源代码位于，因为该网站位于GitHub页面上

导航代码：

<div id="sticky-anchor"></div>
<nav id="tf-menu" class="navbar navbar-default">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand logo" href="#tf-home" style="padding:0px"><img itemprop="image" src="/img/Rewind Transparent.png" width=50 height=50 alt="Rewind Gaming Logo"></img></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav navbar-right">
             <li><a href="#tf-home">Home</a></li>
             <li><a href="/apply">Apply</a></li>
                <li><a href="/signup">Tournaments</a></li>
          </ul>
      </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
</nav>

滚动JS：

function main() {

(function () {
   'use strict';

   /*====================================
    Main Navigation Stick to Top when Scroll
    ======================================*/
    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top) {
          $('#tf-menu').addClass('stick');
      } else {
          $('#tf-menu').removeClass('stick');
      }
  }

  $(function () {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
  });


 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 70
        }, 1000);
        return false;
      }
    }
  });
});
}());
}
main();

我对JS没有太多经验，而且我使用的是CSS模板，所以在向我解释我有多愚蠢时，请不要太深入！ 提前感谢,

---

bucketman

我无法尝试，但我认为如果您将scrollTop:target.offset.top-70设置为更高的值，如scrollTop:target.offset.top-120，将会有所帮助

那-70是导航栏。它已经偏移了70像素

---

试试看

是的，我通过将偏移量设置为175来修复它。非常感谢没问题

function main() {

(function () {
   'use strict';

   /*====================================
    Main Navigation Stick to Top when Scroll
    ======================================*/
    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top) {
          $('#tf-menu').addClass('stick');
      } else {
          $('#tf-menu').removeClass('stick');
      }
  }

  $(function () {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
  });


 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 70
        }, 1000);
        return false;
      }
    }
  });
});
}());
}
main();