我目前正在使用Bootstrap处理其中一个单页组合类似的网站,并遇到了令人讨厌的问题。
我使用导航栏上的按钮转到单页网站的特定部分,但由于某种原因,其中一个部分的标题被截断。
不确定是否相关,但这是导航栏上按钮的代码:
<div class="collapse navbar-collapse" id="navbar-collapse-1" >
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="#">Website name</a></li>
<li>
<a href="#about" >About Us</a>
</li>
<li>
<a href="#submissions">Submissions </a>
</li>
<li>
<a href="#contact">Contact Us </a>
</li>
</ul>
以下是“提交”部分的初始代码:
<section id="submissions" class="submissions">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center"><h2>Submissions</h2></div>
<div class="col-lg-12">
(其下的一切只是内容并关闭所有标签。) 谢谢!
答案 0 :(得分:1)
如果它是一个固定的导航栏,您需要考虑它占用的空间并添加填充。导航栏固定后,它不是DOM的一部分,因此您的章节标题将显示在屏幕顶部,但隐藏在导航栏下。
尝试将body {padding-top:50px}添加到您的css中,看看是否允许显示章节标题。
答案 1 :(得分:0)
快速解决方法是在第一部分的顶部添加间隔(可能<div>
宽度某个特定高度)
答案 2 :(得分:0)
可能有很多情况说明为什么你的锚链没有正确显示。 举个例子,最安全的假设(以及我最常犯的错误)就是忘记在导航栏修复时为我的body元素添加顶部填充。
Gavgrif的答案解决了这个问题。
如果不是这种情况,那么CSS Tricks有一篇关于Anchor Links及其行为的精彩文章,可以找到here。
这篇文章给出了几个例子和&#34;技巧&#34;这使得处理锚位置更容易。总之,您应该在标题内包含锚点(id =&#34;提交&#34;),如下所示:
<section class="submissions">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>
<span name="submissions" id="submissions"></span>
Submissions
</h2>
</div>
<div class="col-lg-12">
此HTML允许您向范围添加负上边距,并以不同的数量向标题添加正底边距,以将锚点精确定位到您想要的位置。
这个&#34;技巧&#34;它在语义和其他几个方面有明显的缺陷,但也有一个&#34; CSS-Only&#34;文章中提供的技巧被旧版浏览器支持。
答案 3 :(得分:0)
嗨,我相信导航菜单位于固定位置。你可以将你的id =“submission”移动到容器内的元素。或者你可以使用jquery来制作像这样的更酷的东西
try catch finally
$("#btn-submission").click(function() {
$('html, body').animate({
scrollTop: $('#submission').offset().top - 50
}, 500);
});