我有一个水平粘性菜单,当用户滚动时会粘在页面顶部。 我有一个非常小的问题,但只是讨厌。
当页面滚动时,整个菜单向右移动几个像素。我希望它不会与此网站http://www.welcomewebstudios.com/类似。
任何人都可以提供帮助
HTML
<div class="menu">
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
JQuery的
$(document).ready(function(){
var menu = document.querySelector('.menu');
var origOffsetY = menu.offsetTop;
function scroll () {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
CSS
* {font-family:arial; padding:0;}
.menu {
font:Verdana, Geneva, sans-serif;
border-style:groove;
border-width:1px;
border-color:#333;
background-color:#000;
font-size:20px;
height:50px;
line-height:30px;
width:100%;
text-align:center;
}
.content {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}
.sticky {position:fixed; top:0;}
li{ display:inline-block; margin:0 0 0 50px;}
答案 0 :(得分:0)