1

これらの関数は完全に機能しますが、これよりもスマートな方法があると確信しています。

$(window).scroll(function(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
  });
});

$(window).resize(function(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
  });
});

$(function(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2) 
  });
});
4

2 に答える 2

1

関数で囲み、3 か所で呼び出します。

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

$(window).resize(function () {
    alignHeader()
});

$(function () {
    alignHeader();
});

function alignHeader() {
    $('#header').css({
        'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
    });
}

このアプローチを試すこともできます

$(window).on('resize scroll', alignHeader)

$(function () {
    alignHeader();
});

function alignHeader() {
    $('#header').css({
        'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
    });
}
于 2013-07-18T21:03:34.293 に答える
1

関数に名前を付けることができます:

$(window).on('scroll resize', something).trigger('resize');

function something(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
  });
}
于 2013-07-18T21:06:42.357 に答える