我的目标是拥有一个单页网站。我当前的问题是页面顶部的导航栏。当我点击我的导航列表中的一个链接时，它会将我带到页面下方，但它总是超出范围。
例如，如果我点击我的第二个导航 li，它会将我带到页面下方，但最终会出现在该 div 中的文本下方。第三页和第四页也是如此:页面向下滚动到刚好超出我希望它结束的位置，即与每页标题的开头完全一致。
HTML:
<body>
<div id="home"> <!--MAIN DIV TO TAKE YOU BACK TO THE TOP OF THE HOME PAGE-->
<div id="wrapper">
<header>
<h1>Pretend Restaurant</h1>
<nav class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#aboutus">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#social">Social</a></li>
</ul>
</nav>
<div id="snow"></div>
</header>
<main>
<div id="page1">
<h2 class="category">Welcome to Snow Bar</h2>
<p><strong>Come relax and enjoy a unique and delicious treat.</strong></p><br>
</div>
<div id="page2">
<a id="menu" class="smooth"></a>
<h2>Menu</h2>
<h4>Recipes</h4>
<p>list of recipes</p>
</div>
<div id="page3">
<a id="aboutus" class="smooth"></a>
<h2>ABOUT US INFO GOES HERE</h2>
</div>
<div id="page4">
<a id="contact" class="smooth"></a>
<h2>Contact and Location</h2>
<p>Contact info goes here</p>
</div>
<div id="page5">
<a id="social" class="smooth"></a>
<h2>Social media information here</h2>
</div>
</div>
</body>
</main>
CSS
*{
box-sizing: border-box;
font-family: Georgia, Times, serif;
border-radius: 3.5px;
float: center;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
opacity: 0.86;
min-height: 900px;
}
h1 { font-family: Georgia, Times, serif;
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 4em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main { margin-left: 100px;
padding-bottom: 100px;
}
.header{ background-color: #000066;
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
box-sizing: border-box;
}
li {
display: inline-block;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
position: sticky;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
transition: 0.3s;
}
nav ul {
list-style: none;
width: 100%;
text-align: center;
display:inline-block;
}
nav a{text-decoration: none;
width: 100%}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
.category {
font-weight: bold;
background-color: #FFFFFF;
color: darkcyan;
text-align: center;
font-size: 50px;
padding-right: 50px;
padding-left:0;
}
#page1 { height:1000px;}
#page2 { height:1000px;}
#page3 { height:1000px;}
#page4 { height:1000px;}
#page5 { height:1000px;}
jQuery
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
最佳答案
这正是 HTML 导航的工作原理。您应该使用 javascript 滚动到正确的位置。公式如下:parent.scrollTop = destination.offsetTop - nav.style.height)
$('.nav a').click(function(e) {
e.preventDefault();
var $scrooll_to_id = $(this.getAttribute('href'));
$('html').stop(true).animate({
scrollTop: ($scrooll_to_id.position().top - $('.nav').height())
});
});
这里有一个 fiddle :https://jsfiddle.net/sjquno0r/1/
关于javascript - 导航栏在我的页面上滚动得太远，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48141740/