Question

我正在尝试计算3个元素的大小，如果它们大于窗口高度，请将另一个类应用于4个元素。

这是我到目前为止所做的：

var limit = $(".logo").height() + $(".nav-items").height() + $(".nav-footer").height();
var win = $(window).height();
    $(document).ready(function(checkHeight) {
        if (limit > win) {
            var element = document.getElementById("sidebar-column");
            element.classList.toggle("red");
    }
});

更新

我想将检查应用于现有功能 - 我对这一切都非常新，感谢您的患者。

function aboutUssubNav() {
    var element = document.getElementById("about-us");
    element.classList.toggle("open");
    var element = document.getElementById("about-us-button");
    element.classList.toggle("open");
    // Check Height of Sidebar Elements to position Sidebar Footer
    var limit = $(".logo").height() + $(".nav-items").height() + $(".nav-footer").height();
    var win = $(window).height();
    if (limit > win) {
         var element = document.getElementById("sidebar-column");
         element.classList.toggle("red");
    }
}

Answer 1

这是因为您是document.ready事件的限制值，在页面的生命周期中不太可能再次被触发。

只需删除document.ready并将其设为

即可

var limit = $(".logo").height() + $(".nav-items").height() + $(".nav-footer").height();
var win = $(window).height();
if (limit > win) {
     var element = document.getElementById("sidebar-column");
     element.classList.toggle("red");
}

Answer 2

只需在$（document）.ready（）函数中包含变量即可。像这样：

    $(document).ready(function() {
        var limit = $(".logo").height() + $(".nav-items").height() + $(".nav-footer").height();
        var win = $(window).height();
        if (limit > win) {
            var element = document.getElementById("sidebar-column");
            element.classList.toggle("red");
        }
    });

为什么这个JS不起作用？

2 个答案: