在jQuery中合并3个函数

Merge 3 functions in jQuery

本文关键字：3个 函数 合并 jQuery      更新时间：2023-09-26

这些函数运行得很好，但我确信有一种比这更聪明的方法：

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

您可以为函数命名：

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

将它封装在一个函数中，并在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)
    });
}
相关文章：