Прокрутите до пункта div -sticky nav height

Question

У меня есть липкая навигация на моем сайте. Когда кто-то нажимает на один из элементов навигации, он прокручивается до соответствующей части сайта, но в настоящее время липкий nav перекрывает div, поэтому похоже, что он не прокручивается до вершины div.

Код для прокрутки выглядит следующим образом:

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

}); 

Nav:

<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, но это, похоже, не работает, и оно все еще перекрывает div .nav-kontakt.

Любые предложения по поводу того, что я делаю неправильно или в другом 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>