Question

我不确定我是否说得对，因为我是初学者，但我正在尝试做一个固定位置导航菜单，始终保持在顶部（我有那部分想通了）和一个链接带你到下面页面的下半部分，同时保持菜单位于顶部。

我已经让菜单保持固定并且确实跳转了，但是由于我的100px导航菜单处于固定位置，它覆盖了它跳到的部分的100px。

我想我想知道什么是最好的方法让它落在100px以上的区域，所以没有一个被切断。

body {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
	nav {
	width: 100%;
	height: 100px;
	position: fixed;
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	font-size: xx-large;
	padding-top: 40px;
}
#content1 {
	height: 500px;
	background-color: #A7E1E8;
	text-align: center;
	color: #000000;
}

<nav><a href="#content2">JUMP</a></nav>
<section id="content1"></section>
<section id="content2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
  <p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p>
</section>
<section id="content1"></section>

Answer 1

您可以使用许多技术实现此目的，但最简单的解决方案是使用Jquery。下面的代码可以帮助你。它获取容器2的偏移量并滚动到它，减去140px，点击链接。

编辑：更新了代码以点击链接

获取锚点

＆＃13;

$(document).ready(function(){
  $("nav a").on('click',function(){
    var link = $(this).attr('href');
    $('html,body').animate({scrollTop: ($(link).offset().top - 140)},'slow');
    return false;
  });
});

＆＃13;

*{
  margin: 0 0;
  padding:0 0;
}
body {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
	nav {
	width: 100%;
	height: 100px;
	position: fixed;
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	font-size: xx-large;
	padding-top: 40px;
}
#content1 {
	height: 500px;
	background-color: #A7E1E8;
	text-align: center;
	color: #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <a href="#content1">JUMP 1</a>
  <a href="#content2">JUMP 2</a>
</nav>
<section id="content1"></section>
<section id="content2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales elit sit amet nibh ultrices cursus. Fusce eget dolor fermentum, pulvinar mi vel, consequat lectus. Curabitur maximus nibh nunc, eu porta nibh commodo id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eleifend, libero vitae venenatis vulputate, tortor magna cursus arcu, id viverra est ante ut est. Nulla placerat purus in fermentum lobortis. Integer sit amet dapibus orci.</p>
  <p>Vivamus fringilla porttitor justo, ac varius neque tristique a. Duis iaculis augue a interdum pretium. Duis feugiat odio vel tortor tincidunt, in rhoncus lectus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer volutpat id orci et scelerisque. Nulla semper felis a risus egestas scelerisque. Ut tempus aliquam orci, pretium dapibus risus dictum at. Pellentesque consectetur eget est eu pulvinar. Nulla facilisi. Vivamus eu viverra turpis, et dapibus enim.</p>
</section>
<section id="content1"></section>

＆＃13;

Answer 2

如果您想保留代码并阻止导航将自己置于内容之上，则可以调整内容框的边距/填充。

如果要调整所有内容框的间距，可以将其添加到css

section {padding-top:140px;}

这应该可以正常工作。它的140px是因为你为导航添加了100px而40px是因为导航的填充顶部。

这是一个小提琴http://jsfiddle.net/8cfygn86/

如果您有其他问题，请告诉我们！

固定位置菜单和内部链接？

2 个答案: