3

使用引导程序navbar，我试图弄清楚如何使它不隐藏身体部分的顶部。

实际上，使用这里推荐的方法可以很好地解决：

Twitter Bootstrap - 顶部导航栏阻止页面的顶部内容

但是仍然有一些东西不起作用：当你有这样的链接时：

<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
<li><a href="#section4">Go to Section 4</a></li>

和

<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p><a href="#">Back to Top</a></p>

在这种情况下，例如，当您单击第 2 节直接链接（或快捷方式）时，页面会正确向下滚动到第 2 节，但它会将其开头隐藏在引导导航栏后面。

关于如何解决这个问题的任何线索？

4

3 回答 3

1

通过将 :target 伪选择器添加到链接的 CSS，您可以将定义的填充应用到所选链接（只要它在浏览器中显示为：www.example.com#link1）。

我花了最后 2 个小时试图搜索网络试图找到 Jquery 或 JS 以将填充应用于目标 div 并在修改我的谷歌搜索词后发现了这个

可能有一种方法可以用旧浏览器来证明这一点，但就目前而言，这让我成为一个快乐的露营者。

于 2012-11-30T04:28:04.020 回答
1

在你的 's上放置一些顶部填充物<h4>以说明你的navbar's 高度。即把它放在你的 CSS 中：

h4 {
  padding-top: 30px;
}

当然，更改30px为您的实际navbar身高。

于 2012-10-06T20:58:31.400 回答
0

I've had the same problem and haven't found a real solution, but just more workarounds (like the "padding-top" work-around itself, that seems very hackish to me). It looks like the topbar issue is still unsolved, people just hack around it somehow.

One non-invasive work-around that works for me (as good as it can) is to add the following JavaScript to the page (apart from the "padding-top" hack):

var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);

I found this in a comment to a bootstrap GitHub issue. However, the function isn't executed in all necessary occasions (e.g. when going to the same anchor again).

A more reliable work-around is moving the anchor positions using CSS relative positioning (found in this StackOverflow answer:

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

However, this is more invasive because you have to give your anchors a class (to distinguish it from links). So you have to update all your anchor HTML code (which might not always be possible, e.g. when you are dealing with a rigid CMS that generates your anchors):

<a class="anchor" id="top"></a>
于 2015-06-05T07:18:58.150 回答