div -sticky navの高さへスクロール

Question

私のウェブサイトにはスティッキーなナビゲーションがあります。誰かがナビゲーションアイテムの1つをクリックすると、サイトの関連する部分にスクロールしますが、現在はスティッキーなナビゲーションが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と重なっています。

私が間違っていることや別のapporach何かの提案は？

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(){ 
 
\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>