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

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

滚动到div -sticky导航高度

1 个答案: