要素の高さを取得してCSSを使用してその値を適用する方法

Question

私は自分のナビゲーションの高さを得て、マージントップに適用しようとしています。私のナビゲーションは固定されているので、私のバナーはその下に隠されていないので、それを補うようにしています。

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

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

    } 

これは私が思っていたが、フロントエンドには何も反映されていなかった。

UPDATE

$(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になります。私はそれを追加する必要があり、これはおそらく、私はが追加されたときに私の.x-navbarの高さを変更する別の機能を持っています。

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

このようにすべてをスムーズにして正しく動作させる方法がわかりません。ページをリロードすると.x-mainは245pxに戻ります。上にスクロールすると、正しく計算されません。

Answer 1

コードは機能します。代わりに$.outerHeight()を使用したい、セレクタが間違っている、またはmargin collapsingが発生している可能性があります。

それはあなたの$.css()ラインで、あなたはCSSの単位を持っているので、bannerTop + 'px'だけでなく、数にbannerTopを変更する必要がありますので$.height()は、整数値を返すことは注目に値します...しかし、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>