动态调整页边距

jQuery Dynamically Sized margins 2

本文关键字：页边距 调整 动态      更新时间：2023-09-26

我正在使用jQuery动态调整垂直边距的大小，我想知道如果我如何解决导致页边距只在页面加载时调整一次的问题。

    /* PAGE SIZE */
    $(document).ready(function(){
        var WIDTH = $(window).width();
        if(WIDTH > 1420){
            $("ul#menu-content-1.menu").css("margin-top","59px");
            $("div.menu-content-container").css("margin-top","59px")
        } else if(WIDTH < 1420) {
            $("ul#menu-content-1.menu").css("margin-top","-59px");
            $("div.menu-content-container").css("margin-top","-59px");
        }
    });

这是我现有的代码。如何解决这个反复出现的问题，以便每次加载页面并调整窗口大小时，边距也会调整?

.ready(), .resize()是使用.bind()函数(或jQuery 1.7+中的.on())的快捷键。.resize(function () {})映射到.bind('resize', function () {})。

如果可能的话，下面是使用.on()的代码:

$(document).on('ready', function() {
    $(window).on('resize', function() {
         // Stuff in here happens on ready and resize.
        var WIDTH = $(window).width();
        if(WIDTH > 1420){
            $("ul#menu-content-1.menu").css("margin-top","59px");
            $("div.menu-content-container").css("margin-top","59px")
        } else if(WIDTH < 1420) {
            $("ul#menu-content-1.menu").css("margin-top","-59px");
            $("div.menu-content-container").css("margin-top","-59px");
        }
    }).trigger('resize'); // Trigger resize handlers.       
});//ready

我假设你想在某个时候触发这个?

设置窗口大小

我还建议使用CSS媒体查询:

ul #menu-content-1.menu {margin-top: 59px}
div.menu-content-container {margin-top:59px}
@media (max-width: 1420) 
{ 
    ul #menu-content-1.menu {margin-top: -59px}
    div.menu-content-container {margin-top: -59px}
}

你可以试着把它放到$ (window) .load ();

 $(window).load(function(){
        var WIDTH = $(window).width();
        if(WIDTH > 1420){
            $("ul#menu-content-1.menu").css("margin-top","59px");
            $("div.menu-content-container").css("margin-top","59px")
        } else if(WIDTH < 1420) {
            $("ul#menu-content-1.menu").css("margin-top","-59px");
            $("div.menu-content-container").css("margin-top","-59px");
        }
    });
相关文章：