なぜJSは動作しませんか？

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

作るだけで$（ドキュメント）.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"); 
     } 
    });