javascript - 滚动到 div - 粘性导航高度

Question

我的网站上有一个粘性导航。当有人点击其中一个导航项时，它会向下滚动到网站的相关部分，但目前粘性导航与 div 重叠，因此看起来它没有滚动到 div 的顶部。

滚动的代码如下所示:

$(".nav-kontakt").click(function() {
  $('html,body').animate({
      scrollTop: $("#kontakt").offset().top - $("#nav").outerHeight(true)
    },
    'slow');
  });
}); 

导航:

<div class="nav-row">
  <ul class="nav-item">
    <li class="nav-leistungen">Leistungen</li>
    <li class="nav-philosophie">Philosophie</li>
    <li class="nav-kontakt" id="last">Kontakt</li>
  </ul>
</div>

滚动到:

<div class="container" id="kontakt">
  <div class="heading-line">
    <span>Kontakt</span>
  </div>
</div>

如您所见，我尝试滚动 - #nav 的高度，但这似乎不起作用，它仍然与 .nav-kontakt div 重叠。

对我做错了什么或不同的方法有什么建议吗？

Answer 1

我建议你创建一个演示来帮助你，但首先试试这个

var fix = 0; // type integer
var nav = $(".nav-row").outerHeight(true);

$('html,body').animate({
    scrollTop: $("#"+selector).offset().top - nav - fix
}, 'slow');

请记住，滚动不会移动超过页面大小。

看这个例子(https://jsfiddle.net/idkc/zchzb2b8/6/)

$(document).ready(function() {
  $("ul.nav-item li").click(function() {
    var selector = $(this).attr("data-id");
    var fix = 0;
    var nav = $(".nav-row").outerHeight(true);
    $('html,body').animate({
      scrollTop: $("#" + selector).offset().top - nav - fix
    }, 'slow');
  });
});

body {
  margin: 0;
  padding: 0;
}

.container {
  border: 1px solid red;
}

.nav-row {
  position: fixed;
  width: 100%;
  background-color: #ffffff;
  margin: 0;
}

.contents {
  padding-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="nav-row">
  <ul class="nav-item">
    <li class="nav-leistungen" data-id="content1">Leistungen</li>
    <li class="nav-philosophie" data-id="content2">Philosophie</li>
    <li class="nav-kontakt" data-id="content3">Kontakt</li>
    <li class="nav-xxxx" data-id="content4">pppppppppppppp</li>
  </ul>
</div>
<div class="contents">
  <div class="container" id="content1">
    <div class="heading-line">
      <span>content 1</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
    </div>
  </div>
  <div class="container" id="content2">
    <div class="heading-line">
      <span>content 2</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
    </div>
  </div>
  <div class="container" id="content3">
    <div class="heading-line">
      <span>content 3</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
    </div>
  </div>
  <div class="container" id="content4">
    <div class="heading-line">
      <span>content 4</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nulla corporis odio totam magni ea consequatur. Vel quidem, doloremque quia vero reprehenderit dolorum qui atque, magni itaque, esse deserunt. Deserunt.</p>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>