滚动期间jQuery Sticky Navigation Center

时间:2013-01-30 11:13:25

标签: jquery css

如何在滚动期间设置导航的宽度。滚动期间导航适合100%宽度。如果我将宽度设置为比其左边500px: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();
    });

});

1 个答案:

答案 0 :(得分:0)

试试这个: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();
    });

});