調整變量的計算窗口高度的大小

Question

我在滾動客戶端網站時創建了一個粘性導航欄，並使其工作。但是，因爲上面的div有一個基於瀏覽器窗口高度的可變高度減去旋轉木馬的導航欄height: calc(100vh - 100px);當瀏覽器窗口調整大小時，它會中斷。那麼有人可以幫助我在下面的代碼中添加一個resize事件，以便在更改瀏覽器大小時更新窗口的高度？

var yourNavigation = $(".home-navbar"); 
    stickyDiv = "sticky"; 
    yourHeader = $('.home-carousel').height(); 

$(window).scroll(function() { 
    if($(this).scrollTop() > yourHeader) { 
    yourNavigation.addClass(stickyDiv); 
    $("#sticky").addClass("sticky__padding"); 
    } else { 
    yourNavigation.removeClass(stickyDiv); 
    $("#sticky").removeClass("sticky__padding"); 
    } 
}); 

Answer 1

我覺得你只是想使scrollTop檢查到一個函數並調用它load，scroll和resize如果是這樣，您可以使用純JS或jQuery來做到這一點：

function headerStuff() { 
    var yourNavigation = $(".home-navbar"); 
    var stickyDiv = "sticky"; 
    var yourHeader = $('.home-carousel').height(); 
    if($(this).scrollTop() > yourHeader) { 
    yourNavigation.addClass(stickyDiv); 
    $("#sticky").addClass("sticky__padding"); 
    } else { 
    yourNavigation.removeClass(stickyDiv); 
    $("#sticky").removeClass("sticky__padding"); 
    } 
}; 

window.addEventListener("load", headerStuff); 
window.addEventListener("resize", headerStuff); 
window.addEventListener("scroll", headerStuff);