Question

我正在使用JavaScript计算元素的高度，然后我将该高度作为padding-top应用于另一个元素，如下所示：

 $(window).on("ready resize", function () {
        if (window.innerWidth > 1024) {
            var pageTop = $("#header.header-fixed .content").outerHeight() + "px";
            $("#page .topSection").css("padding-top", pageTop);
        } else {
            var pageTop = $("#secondHeader").outerHeight() + "px";
            $("#page .topSection").css("padding-top", pageTop);
        }
    });

我的问题是，我如何将这个高度应用为margin-top＆＃34; - ＆＃34;同样的元素？例如，如果#header高度为100px; .topSection的margin -top将为-100px

------------- 更新 -------------------------- -------------

谢谢！以下答案有帮助！

我遇到的另一个问题是应用减去边距的结果！这是我目前使用的代码......

//Fixed header optimizer
    $(window).on("ready resize", function() {
        if (window.innerWidth > 1024) {
            var pageTop = $("#header").outerHeight() + "px";        
            $("#page .topSection").css({"padding-top": pageTop, "margin-top": "-"+pageTop});
        } else {
            var pageTop = $("#secondHeader").outerHeight() + "px";
            $("#page .topSection").css({"padding-top": pageTop, "margin-top": 0});
        }
    });

如果#header有一个.header修复的类，怎么能让它不应用这些边距？

Answer 1

尝试将pageTop字符串与“ - ”连接：

$(window).on("ready resize", function () {
        if (window.innerWidth > 1024) {
            if(!$('#header').hasClass("header-fixed")) {
                var pageTop = $("#header").outerHeight() + "px";
                $("#page .topSection").css({"padding-top": pageTop, "margin-top": "-" + pageTop});
            }
        } else {
            if(!$('#header').hasClass("header-fixed")) {
                var pageTop = $("#secondHeader").outerHeight() + "px";
                $("#page .topSection").css({"padding-top": pageTop, "margin-top": "-" + pageTop});
            }
        }
    });

Answer 2

.css({"padding-top": pageTop, "margin-top": "-"+pageTop})

Answer 3

尝试以下代码，

$(window).on("ready resize", function () {
    if (window.innerWidth > 1024) {
        var pageTop = $("#header.header-fixed .content").outerHeight() + "px";
        $("#page .topSection").css({"margin-top": "-" + pageTop, "padding-top" :  pageTop});
    } else {
        var pageTop = $("#secondHeader").outerHeight() + "px";
        $("#page .topSection").css({"margin-top": "-" + pageTop, "padding-top" : pageTop});
    }
});

Answer 4

使用此代码

$("#page .topSection").css({"padding-top": pageTop,"margin-top":"-"+pageTop});

而不是

$("#page .topSection").css("padding-top", pageTop);

使用JS CSS应用减去上边距

4 个答案: