粘性菜單略有移動？

Question

我有一個水平的粘性菜單，當用戶滾動時，它粘在頁面的頂部。 我有一個非常小的問題，但只是煩人。

當頁面滾動時，整個菜單右移幾個像素。我希望它不會類似於這個網站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;} 

Answer 1

加入。菜單{}如下：

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

應該這樣做，這裏是小提琴：http://jsfiddle.net/hbrunar/zXrNX/1/