如何滾動到一個內部錨點鏈接計算粘性頂部欄？

我正在使用基金會，並希望有一個粘性的頂部欄，並帶有指向頁面內部部分的子鏈接。問題是，如果我這樣做，天真，即：如何滾動到一個內部錨點鏈接計算粘性頂部欄？

<div class="sticky"> 
    <nav class="top-bar" data-topbar role="navigation"> 
    <section class="top-bar-section"> 
     <ul class="left"> 
     <li><a href="#/intro">Intro</a></li> 
     <li><a href="#/basic">Basic</a></li> 
     </ul> 
    </section> 
    </nav> 
</div> 

... not much stuff ... 

<a name="/intro"></a> 
<h2>Intro</h2> 

... much stuff ... 

<a name="/basic"></a> 
<h2>Basic</h2> 

... much stuff ...

...那麼頁面滾動到頭部，然後用粘頂欄遮擋頂部的頂部。 See the jsfiddle並點擊頂部鏈接查看我的意思。

我怎樣才能保持一個棘手的頂欄，尚未有頂欄上點擊滾動頁面，使得頭的正下方的頂欄，而不是遮掩？

來源

2015-11-18 Claudiu

解決方案＃1

添加<h2>樣式規則的CSS，像：

h2 { 
margin-top: 30px; 
}

解決方案＃2

如果你希望儘量減少多餘的白色 - 添加到文檔的空間，你可以嘗試像下面這樣，而是：

a[name]:target { 
padding-top: 30px; 
}

這隻會到當前針對的<a>元素添加空白。

來源

2015-11-18 19:20:33 Rounin

謝謝。這與'padding-top'一起工作，但留下了很多不必要的空間。必須有更好的方法... – Claudiu

我已經爲上面的帖子添加了一個替代解決方案，這將導致更少的空白被添加到頁面。 – Rounin

我最後寫一個函數來做到這一點。

它改變了窗口的位置，以便充當如果用戶點擊一個鏈接<a href='#internal-ref></a>。
它滾動到鏈接反正用scrollIntoView()（感謝this answer讓我知道它的存在）。
它然後使用window.scrollTo()$("nav.top-bar").height()像素滾動回來。

代碼：

function scrollToAnchor(name) { 
    // change location 
    window.location = '#' + name; 

    // scroll to element anyway 
    var element = $("a[name='" + name + "']")[0]; 
    if (!element) { 
    console.error("No such anchor with name", name); 
    return; 
    } 
    element.scrollIntoView(); 

    // scroll back to leave room for sticky nav 
    var stickyNavHeight = $("nav.top-bar").height(); 
    console.log(stickyNavHeight); 
    window.scrollTo(window.scrollX, window.scrollY - stickyNavHeight); 
}

Live demo。

來源

2015-11-18 21:43:31 Claudiu

如何滾動到一個內部錨點鏈接計算粘性頂部欄？

回答

相關問題