单页引导程序网站跳过部分

时间:2016-02-11 00:49:29

标签: jquery html css twitter-bootstrap portfolio

我目前正在使用Bootstrap处理其中一个单页组合类似的网站,并遇到了令人讨厌的问题。

我使用导航栏上的按钮转到单页网站的特定部分,但由于某种原因,其中一个部分的标题被截断。

以下是它的显示方式:enter image description here

以下是我希望看到的内容:enter image description here

不确定是否相关,但这是导航栏上按钮的代码:

          <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">

(其下的一切只是内容并关闭所有标签。) 谢谢!

4 个答案:

答案 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);
	});