具有固定标题的页面导航 [英] Page navigation with fixed header

问题描述

我的站点上有一个水平的固定标题，当我使用页面导航滚动到一个ID时，它会将我试图滚动到标题下方的内容放入标题。

有没有一种方法可以抵消页面导航显示80像素（向下）的位置？ 我实际上能够以最简单和最可接受的方式自己修复它。我将解决方案放在下面的答案中。

解决方案

好吧，因为没有其他人有答案，所以我自己修复了。 / p>

以下是修正：

JSFiddle

这是通过将一个隐藏的 div 在我想滚动的内容上方定位x个像素。然后我滚动到 div ，而不是我最初想要滚动的内容。 'x'应该是你的标题的高度，这样你想滚动的内容就会出现在你的标题正下方。

I have a horizontal fixed header on top of my site and when I use page navigation to scroll to an ID, it puts the content I'm trying to scroll to underneath the header.

Is there a way I can offset where the page navigation shows up by 80 pixels (down)?

Edit: I was actually able to fix it myself in the simplest and most acceptable manner possible. I put the solution in an answer below.

解决方案

Well, since no one else had an answer, I fixed it myself.

Here is the fix:

JSFiddle

This was done by making a hidden div that is absolutely positoned 'x' amount of pixlels above the content I want to scroll to. I then scroll to that div instead of the content I originally wanted to scroll to. 'x' should be the height of your header, this way the content you want to scroll to appears directly below your header like it should.

这篇关于具有固定标题的页面导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！