粘性菜单略有移动?

时间:2014-01-19 20:29:49

标签: jquery html css

我有一个水平粘性菜单,当用户滚动时会粘在页面顶部。 我有一个非常小的问题,但只是讨厌。

当页面滚动时,整个菜单向右移动几个像素。我希望它不会与此网站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;} 

1 个答案:

答案 0 :(得分:0)

添加.menu {}以下内容:

position: fixed;
top:0;
left:0;

应该这样做,这里是小提琴:http://jsfiddle.net/hbrunar/zXrNX/1/