バナーを一定エリアでフローティングする方法【CSSのみ】

jsでやろうとしたけど挫折

~~TOPから固定したい要素までの高さまできたら固定~~
~~またヘッダーがより下で固定したいのでヘッダーの高さを取得して~~
~~CSSの場所指定にも適応させる~~

//フローティング　PC　CSS 　勝手に高さ合わせて固定

jQuery( function() {
var $offset = jQuery( '.floating' ).offset();//floatingまでの距離
var $head_height =$('header').height();//headerの高さ
var $sidebar_width =$('#sidebar').width();//sidebarの幅
var $floating_height =$('.floating').height();//floatingの高さ
var $contents_height =$('#contents').height();//contentsの高さ

jQuery( window ).scroll( function () {
if( jQuery( window ).scrollTop() > $offset.top -$head_height -10 ) {
//スクロール量>フローティングまでの距離-()
jQuery( '.floating' ).addClass( 'fixed' );
jQuery( '.floating' ).css( {'top':$head_height +10 , 'width':$sidebar_width} );
jQuery( '#sidebar' ).css( {'height':$contents_height-$floating_height} );
} else {
jQuery( '.floating' ).removeClass( 'fixed' );
}
} );

jQuery( window ).scroll( function () {
if( jQuery( window ).scrollTop() > $contents_height-$head_height -10 ) {
jQuery( '.floating' ).addClass( 'fixed_bottom' );
jQuery( '.floating' ).css( {'width':$sidebar_width} );
}else {
jQuery( '.floating' ).removeClass( 'fixed_bottom' );
}
} );
} );

要素の高さ／幅を設定／取得する
https://www.buildinsider.net/web/jqueryref/009

[jQuery]でcssプロパティを動的に追加、変更、削除する
https://qiita.com/kazTera/items/ab5dd9fb5b2579b25c4d

position: stickyを使う

#sidebar .floating {
position: -webkit-sticky;
position: sticky;
top: 150px;
left: 0;
}

position: stickyが効かない場合

・フローティングしたい範囲の高さを指定していない場合、フローティングしてくれない。

・サイドバーの場合、高さはコンテンツの高さに合わせて、jsなどで出力する。

jQuery( function() {
var $contents_height =$('#contents').height();//contentsの高さ
jQuery( '#sidebar' ).css( {'height':$contents_height} );//sidebarをcontentsの高さにする
} );

・理由は全くわからないが、親要素に　overflow: hidden;　などがかかっている場合、フローティングしてくれない。