Bootstrap固定导航栏＆amp;锚被隐藏

时间：2017-01-05 03:36:13

标签： html css twitter-bootstrap

我正在制作一个我正在制作的引导网站的问题，当点击时，内容的锚点被隐藏在顶部导航栏的下方。我已经读过有关此问题的其他人，并花了几个小时试图创建我自己的解决方案和其他人民网站的已接受答案。

以下是我上传的网站示例，其中显示了点击超链接字形时出现的问题：Jsfiddle

我试过了

padding-top:70px; margin-top:-70px;

修复条目类，它只是弄乱了布局，以及我能想到的所有可能的边距和填充变化，这最多给了我想要的效果，但最终使框顶部高70像素只是，我不想要，我想要的一切都是它的大小，但点击时不会在导航栏下滚动锚点

我还尝试制作一个javascript / jquery修复程序，以便在检测到正确格式化的锚点时自动向下滚动70像素，稍微有效，我甚至可以通过网址加载页面而不是鼠标点击它（site.com/#div），但是我在通过刷新重新加载页面时遇到了问题，我不知道如何修复;我真的很想通过CSS解决这个问题，因为似乎应该有一种方法可以做到这一点，而不必依赖于启用了JS的人

编辑：Picture当你点击一个锚点（左）和我想要发生的事情（右）时会发生什么

1 个答案:

答案 0 :(得分：0)

你可以尝试使用这个代码，当我们点击它时，Anchor标签有默认行为它会到达页面顶部，如果我们要删除它，我们需要使用jQuery preventDefault() 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
.hoverlist :hover {
	background-color: #f5f5f5;
}
.name h3 {
	text-align: center
}
body {
	margin-top: 70px;
}
.entries {
}
</style>
  <script>
  	$(function(){
		$('.date').on('click','a',function(e){
			e.preventDefault();
		  var section = this.href;
		  var sectionClean = section.substring(section.indexOf("#"));
		  $("html, body").animate({
			scrollTop: $(sectionClean).offset().top - 70
		  }, 1000, function () {
			//window.location.hash = sectionClean;
		  });
		});
	});
  </script>
  </head>
  <body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container"> <a class="navbar-brand" href="index.html">Sitename</a> </div>
  </nav>
  
<div class="container">
<ul class="list-group hoverlist">
    <li id="1" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        f23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#1"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="2" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#2"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="3" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#3"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="4" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#4"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="5" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#5"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="6" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#6"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="7" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#7"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="8" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#8"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="9" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#9"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="10" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#10"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="11" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#11"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="12" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#12"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="13" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#13"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="14" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#14"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="15" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#15"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
    <li id="16" class="list-group-item entries">
    <div class="name">
        <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3>
      </div>
    <div class="ids">
        <h4>fhdsjkafhsdkjfsdf</h4>
        fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div>
    <div class="reason">
        <h4>fasdjkfasf</h4>
        fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div>
    <div class="date">
        <h4>sdfasdfsf</h4>
        fasdfsf<a href="#16"><span class="glyphicon glyphicon-link pull-right"></span></a></div>
  </li>
  </ul>
<ul class="pager">
    <li><a href="#">Next</a></li>
  </ul>
<footer class="footer">
    <div class="pull-left text-muted">©</div>
    <div class="pull-right text-muted"><a href="#">#</a></div>
  </footer>
</body>

相关问题
最新问题