頁面定位符與「滾動然後修復」JS導航欄代碼

Question

組合不正常工作我使用這個漂亮的小JavaScript來使我的導航欄（通常坐在頂部230px下）粘到頂部一旦頁面向下滾動即230頁。然後它給「nav」元素一個「固定」的位置。

$(document).ready(function() { 
 
    $(window).bind('scroll', function() { 
 

 
    if ($(window).scrollTop() > 230) { 
 
     $('nav').addClass('fixed'); 
 
    } else { 
 
     $('nav').removeClass('fixed'); 
 
    } 
 
    }); 
 
});

nav { 
 
    width: 90%; 
 
    display: flex; 
 
    justify-content: center; 
 
    max-width: 1400px; 
 
    height: 85px; 
 
    background-color: rgba(249, 241, 228, 1); 
 
    margin: auto; 
 
    border-top-left-radius: 0em; 
 
    border-top-right-radius: 0em; 
 
    border-bottom-left-radius: 2em; 
 
    border-bottom-right-radius: 2em; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    border-top: 0; 
 
    top: 0; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 

 
    <ul> 
 
    <li><a href="#one">One</a></li> 
 
    <li><a href="#two">Two</a></li> 
 
    <li><a href="#three">Three</a></li> 
 
    <li><a href="#four">Four</a></li> 
 
    </ul> 
 

 
</nav>

現在的問題：我已經放置在相應的錨目標頁面內 ，並給予他們一些「填充頂」佔固定導航欄（約90像素），這樣當點擊後頁面跳到它們後面時，它們不會消失在欄後面。

.anchor { 
     padding-top: 90px; 
     } 

<a class="anchor" id="three"> 

這工作正常，因爲導航欄已經固定在頂部。 但是，如果您在導航欄仍處於其原始頁面中間位置（例如，用戶首次點擊該頁面）時點擊鏈接，它會忽略我給出錨點目標的偏移量並跳轉到錨點的奇怪位置目標隱藏在導航欄後面（甚至不與頁面的頂部對齊）！

如果我然後再次單擊鏈接（現在在頁面頂部的固定欄中），它會自行更正並顯示我想要的頁面。但是，第一次點擊總是錯過 - 我無法弄清楚爲什麼！請幫助

編輯：工作演示在這裏：http://www.myway.de/husow/problem/problem.html

Answer 1

1日添加新的班級名稱spacebody你的第一個div與class="space"

<nav> 
... 
</nav> 

<div class="space spacebody"> 
</div> 

第二JS使用下面的應該解決您的問題：

$(document).ready(function() { 
    $(window).bind('scroll', function() { 

     if ($(window).scrollTop() > 230) { 
     $('nav').addClass('fixed'); 
     $('.spacebody').css('margin-top', '85px'); 
     } else { 
     $('nav').removeClass('fixed'); 
     $('.spacebody').css('margin-top', '0px'); 
     } 
    }); 
    }); 

原因爲什麼？

因爲當你的導航不固定時，它的高度爲85px，當你向下滾動時它沒有高度，這是0高度。然後，下面的所有內容都會向上移動85px，從而導致您的目標低於ONE或TWO等目標。這不是您錯過了第一次點擊，這是導航未固定時的點擊，您將向下滾動85px。如果您滾動到頂部並點擊，您將再次錯過。

你可以很容易地看到這一點，如果你改變你的nav CSS與background-color: transparent;

隨着代碼的時候，你的資產淨值成爲固定爲85px加邊距到div下面讓他們保留以上應該修復它您點擊的高度相同。