javascript - 使用 JS CSS 应用负上边距

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 "-"也应用到同一个元素？ 例如，如果#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-fixed 类，我怎样才能让它不应用这些边距？

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