滾動到div -sticky導航高度

我的網站上有一個粘滯導航。當有人點擊其中一個導航項時，它會向下滾動到該網站的相關部分，但目前粘性導航欄與該div重疊，因此看起來它沒有滾動到div的頂部。滾動到div -sticky導航高度

滾動的代碼如下所示：

$(".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重疊。

任何關於我做錯了什麼或不同的apporach的建議？

來源

2017-02-22 MariaL

什麼是你的標記是什麼樣子？你在使用錨或ID嗎？你的outerHeight是否會返回正確的值？ – isherwood

我建議你創建一個演示來幫助你，但第一次嘗試這種

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(){ 
 
\t $("ul.nav-item li").click(function() { 
 
\t \t var selector = $(this).attr("data-id"); 
 
\t  var fix = 0; 
 
\t  var nav = $(".nav-row").outerHeight(true); 
 
\t \t $('html,body').animate({ 
 
\t \t \t \t \t scrollTop: $("#"+selector).offset().top - nav - fix 
 
\t \t \t }, 'slow'); 
 
\t }); 
 
});

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"> 
 
\t <ul class="nav-item"> 
 
\t \t <li class="nav-leistungen" data-id="content1">Leistungen</li> 
 
\t \t <li class="nav-philosophie" data-id="content2">Philosophie</li> 
 
\t \t <li class="nav-kontakt" data-id="content3">Kontakt</li> 
 
\t \t <li class="nav-xxxx" data-id="content4">pppppppppppppp</li> 
 
\t </ul> 
 
</div> 
 
<div class="contents"> 
 
\t <div class="container" id="content1"> 
 
\t \t <div class="heading-line"> 
 
\t \t \t <span>content 1</span> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="container" id="content2"> 
 
\t \t <div class="heading-line"> 
 
\t \t \t <span>content 2</span> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="container" id="content3"> 
 
\t \t <div class="heading-line"> 
 
\t \t \t <span>content 3</span> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="container" id="content4"> 
 
\t \t <div class="heading-line"> 
 
\t \t \t <span>content 4</span> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<br>

來源

2017-02-22 17:17:37

滾動到div -sticky導航高度

回答

相關問題