中心粘性菜单？

Question

我找到了一段使用CSS脚本的代码，当我向下滚动时，我可以在菜单上粘贴到屏幕顶部。

此刻它向左对齐，我希望它在我的标题下居中，并在向下滚动时保持居中。

我已经尝试更改一些值并使用填充但是它会产生问题，我认为必须更容易做到这一点，我可能会错过。

HTML

    <pre>
    <script>
    $(function() {


    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;


    var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top


        if (scroll_top > sticky_navigation_offset_top) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
     } else {
            $('#sticky_navigation').css({ 'position': 'relative' });
        }  
    };

    sticky_navigation();

    $(window).scroll(function() {
         sticky_navigation();
    });

    });  
   </script>

    <div id="demo_top_wrapper">

    <div id="sticky_navigation_wrapper">
        <div id="sticky_navigation">
            <div class="demo_container">
                <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>
        </div>
    </div>

    </div>

   </pre>

CSS

.demo_container { width:980px; margin:0 auto;padding-left:0 auto; }
#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }


#sticky_navigation_wrapper { width:100%; height:50px; }
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png);     -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }

Answer 1

实际上，你的#sticky_navigation div的宽度设置为100％，因此它与你的页面一样大。您必须将div的宽度设置为“auto”或精确值（如400px）或将其删除，将其边距设置为“auto” 然后，从js代码中删除“left：0px”，它将div 0px设置为远离页面的左边界。

的CSS：

#sticky_navigation { width:auto; margin:auto; text-align:center; height:50px; background:url(trans-black-60.png);     -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
.demo_container { margin:auto; text-align:center; }

JS：

 $('#sticky_navigation').css({ 'position': 'fixed', 'top':0 });