jquery - 滚动期间的 jQuery 粘性导航中心

Question

如何在滚动期间设置导航的宽度。导航在滚动期间适合 100% 的宽度。如果我将宽度设置为 500px，而不是其 left:0 定位。在左侧，我无法将导航设置为自动居中。

http://jsfiddle.net/aY8a7/

$(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 {
            $('#navigation_menu').css({ 'position': 'relative' });
        }  
    };

    sticky_navigation();

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

});

Answer 1

试试这个：http: //jsfiddle.net/aY8a7/1/

$(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
        var $ul = $('#sticky_navigation ul').width()+'px';

        if (scroll_top > sticky_navigation_offset_top) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
            $('#sticky_navigation ul').css({'width':$ul, 'display':'block', 'text-align':'center'});
        } else {
            $('#navigation_menu').css({ 'position': 'relative' });
        }  
    };

    sticky_navigation();

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

});