如何滚动到一个内部锚点链接计算粘性顶部栏？

我正在使用基金会，并希望有一个粘性的顶部栏，并带有指向页面内部部分的子链接。问题是，如果我这样做，天真，即：如何滚动到一个内部锚点链接计算粘性顶部栏？

<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

如何滚动到一个内部锚点链接计算粘性顶部栏？

回答

相关问题