javascript - Merge 3 functions in jQuery

Question

These functions works perfectly, but I be sure that there is a smarter way than this:

$(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) 
  });
});

Answer 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)
    });
}

Answer 2

您可以为您的函数命名：

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

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