如何獲取元素的高度，然后通過CSS應用該值

Question

我正在嘗試獲取導航的高度並將其應用到頁邊距頂部，以便可以抵消橫幅。 我的導航是固定的，因此我想對此進行補償，以使橫幅不會隱藏在下方。

// Offset Banner to Height of Navigation
    function bannerOffset() {

        var bannerTop = $('.x-navbar').height();    
        $('#banner-carousel').css('margin-top', bannerTop);

    }

我以為可以做到這一點，但在前端根本不反映任何內容。

更新

$(document).ready(function() {
        var bannerTop = $('.x-navbar').outerHeight();
        $('.x-main').css('margin-top', bannerTop);

        $(window).scroll(function() {
            var bannerTopScroll = $('.x-navbar.scroll').outerHeight();
            if ($(document).scrollTop() > 1) {
                $('.x-main').css('margin-top', bannerTopScroll);    
            }
        });
    });

所以我以為我有這個，但是在加載時， .x-main的邊距頂部是245px 。 當我滾動時，它變成85px 。 我可以看到數字下降了。 問題是，當我向上滾動到頂部時，該值不會回到245px 。 它不是很一致，但是我經常得到144px 。 我應該補充一點，這可能就是為什么，當添加.scroll時，我還有另一個函數可以更改.x-navbar的高度。

$(window).scroll(function() {
      if ($(document).scrollTop() > 1) {
        $('.x-navbar').addClass('scroll');
      } else {
        $('.x-navbar').removeClass('scroll');
      }
});

因此，我不確定如何使這一切順利並正常工作。 如果我重新加載頁面，則.x-main返回245px 。 當我滾動回到頂部時，計算不正確。

Answer 1

您的代碼有效。 也許您想改用$.outerHeight() ，選擇器錯誤，或者邊距崩潰 。

值得注意的是$.height()返回一個整數值，因此在$.css()行中，應將bannerTop更改為bannerTop + 'px'以便CSS具有一個單位，而不僅僅是一個數字...而是看起來jQuery在這里為我自動完成了任務。 您可以嘗試看看。

 var bannerTop = $('.x-navbar').height(); $('#banner-carousel').css('margin-top', bannerTop); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="x-navbar">x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br></div> <div id="banner-carousel">banner carousel</div>