我在点击导航栏主题时尝试将滚动动画制作到特定位置。动画确实可以工作,但是当点击某个主题时,导航栏会向下滚动并将自身定位在图片中稍高或略低的位置,但不能完全位于其上方。 如何解决这个问题?
我的代码如下:
$(document).ready(function() {
var navpos = $('#navi').offset().top;
console.log(navpos.top);
var footer_postion = $('#footie').offset().top;
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos && $(window).scrollTop() < footer_postion) {
$('#navi').addClass('fixed');
} else {
$('#navi').removeClass('fixed');
}
});
var shp = $('.nav').height();
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top - shp
}, 1000);
}
});
});
&#13;
* {
margin: 0;
padding: 0;
}
div.container {
background-color: rgba(225, 226, 228, 0.62);
height: 76px;
}
h1 {
font-family: 'Zilla Slab', serif;
color: rgba(58, 58, 54, 0.52);
text-align: center;
padding-top: 17px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
.nav-placeholder {
background-color: rgba(112, 121, 130, 0.62);
height: 25px;
width: 1349px;
}
ul {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 0px;
margin-bottom: 0px;
}
li {
display: inline-block;
text-decoration: none;
list-style: none;
margin-right: 17px;
margin-top: 2px;
}
li a {
text-decoration: none;
color: black;
font-family: 'Zilla Slab', serif;
}
.img {
background-color: aliceblue;
}
img {
display: block;
margin: 0 auto;
padding-top: 25px;
}
a:hover,
a:active {
color: aliceblue;
}
footer.container {
height: 900px;
background-color: rgba(225, 226, 228, 0.62);
}
h1.end {
font-family: 'Zilla Slab', serif;
color: rgba(58, 58, 54, 0.52);
text-align: center;
padding-top: 207px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="Home">
<h1>Photo Webshop</h1>
</div>
<div class="nav-placeholder" id="navi">
<div class="nav">
<ul>
<li><a href="#Home">Home</a></li>
<li> <a href="#Photos">Street Art</a></li>
<li> <a href="#Veggies">Veggies</a></li>
<li> <a href="#Berries">Berries</a></li>
<li> <a href="#Dog">Dog</a></li>
<li> <a href="#Beach">Beach</a></li>
</ul>
</div>
</div>
<div id="Berries" class="img">
<img src="images/berries.png">
</div>
<div id="Veggies" class="img">
<img src="images/tomato.png">
</div>
<div id="Photos" class="img">
<img src="images/sleeper.png">
</div>
<div id="Dog" class="img">
<img src="images/dog.png">
</div>
<div class="img">
<img src="images/ladyfinger.png">
</div>
<div id="Beach" class="img">
<img src="images/footie.png">
</div>
<footer class="container" id="footie">
<div class="fixed-footer">
<h1 class="end">Copyright © All Rights Reserved.</h1>
</div>
</footer>
&#13;
谢谢。
答案 0 :(得分:1)
将填充顶部更改为边距顶部一次,然后尝试
img {
display: block;
margin: 0 auto;
padding-top: 25px;
}
喜欢这个
img {
display: block;
margin: 0 auto;
margin-top: 25px;
}
答案 1 :(得分:0)
终于把它弄出来了。导航栏高度是我代码中缺少的。
> var navHeight= $('#navi').height();
> $('.nav-container').height(navHeight);