Question

我正在使用导航栏折叠的网站上工作，并在向下滚动时变得不透明。这导致了一个问题，即单击页面上div的链接会导致该div的顶部转到页面顶部，而不是导航栏底部的下方。该网站正在rewindrl.uk上线。是否有某种方法可以在页面顶部偏移div滚动，以便排列得很好，或以其他方式预测＆＃39;滚动下来时导航栏高度的因素？完整的源代码位于github.com/rewindrl/rewindrl.github.io，因为该网站托管在GitHub Pages上。

导航代码：

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

导航CSS：

#tf-menu {
margin-bottom: 0;
background: transparent;
border: 0;
color: #fff !important;
padding: 2% 0;
transition: all 0.5s;
}
#sticky {
    padding: 0.5ex;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#tf-menu.stick {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    background: #222222;
    padding: 1% 0;
}
#tf-menu.navbar-default .navbar-nav > li > a {
    color: #C5C5C5;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

#tf-menu.navbar-default .navbar-nav > li > a:hover, 
#tf-menu.navbar-default .navbar-nav > li > a:focus {
    color: #00D2FF;
    background-color: transparent;
}

滚动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

Answer 1

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

- 70是导航栏。它已经偏移70px

试试;）

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

1 个答案: