サイドバーの高さをスクロールのコンテンツと同じに設定します。

Question

場合によっては、コンテンツのdivの高さがサイドバーの高さより大きく、見栄えが悪いことがあります。コンテンツの高さは、ページスクロールに、サイドバーよりも大きければ、私がやりたい

は、コンテンツの下部まで

をサイドバーのマージントップを追加し、私はこのコードであることを実行しようとしました：

var sidebar = $("#sidebar").outerHeight(); 
var content = $("#content-left").outerHeight(); 
var gap = (content - sidebar); 
$(window).scroll(function() { 
if ($(this).scrollTop() > gap) { 
if (content > sidebar) { 
$("#sidebar").css('margin-top', +gap); 
}}}); 

しかし、実際に私がしたいことではありません。ユーザーが20ピクセルスクロールしてコンテンツの最後まで20ピクセルの余白を追加したい場合

これを行うより簡単で良い方法がある場合は、私にお知らせください。

ありがとうございました！

UPDATE：

ここでは私の＃コンテンツ左CSSです：#content-left { float: left;width: 68%;}

と#sidebarのCSS：

float: right; 
width: 30%; 
height: auto; 
padding: 0; 
margin-top: 0px; 
margin-bottom: 15px; 
overflow: hidden; 

Answer 1

私は（それが受け入れられた後に）答えを改善することを決めました。今私は、divの位置を処理する関数を作成しました。スクロール、ウインドウのサイズ変更などで実行することができます。このコードを使用したい場合に便利です。

だけの変数を変更：

• contentHeight
• sidebarHeight
• contentOffset

そして、あなたはすべて完了している:)。

これ以上の改善に関する提案はいつでも歓迎します。

JS-フィドル

JS-Fiddle

HTML

<header> 
<h1>"The sticking sidebar"</h1> 
</header> 
<div id="content"><p>START<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.<br/>END</p></div> 
<div id="sidebar"><p>START<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.<br/>END</p></div> 
<footer><i>footer</i></footer> 

CSS

header h1{ 
    text-align: center; 
} 
#content{ 
    float: left; 
    width: 70%; 
    background-color: rgb(150, 150, 0) 
} 
#sidebar{ 
    position: relative; 
    width: 30%; 
    float: right; 
    background-color: yellow; 
} 

のJS/jQueryの

$(document).ready(function(){ 
    // define variables before scrollin to destress the processor 
    let contentHeight = $("#content").height(); 
    let sidebarHeight = $("#sidebar").height(); 
    let windowHeight = $(window).height(); 
    let doc = $(document); 
    let contentOffset = $("#content").offset().top; 

    $(window).resize(function(){ 
    //should reset all variables here or the code will bug out on screen resizing 
    contentHeight = $("#content").height();; 
    sidebarHeight = $("#sidebar").height(); 
    windowHeight = $(window).height(); 
    contentOffset = $("#content").offset().top; 
    determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight,windowHeight); 
    }); 
    $(document).scroll(function(){ 
      determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight); 
    }); // end scroll 
});//end ready 

function determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight){ 
    //only run if the #sidebar is higher than the #content 
    if(contentHeight>sidebarHeight){ 
    var scrollTop = doc.scrollTop(); 
    //check if variable has been previously created by this function else the value is 0 
    let oldScrollTop = (window.oldScrollTop)?window.oldScrollTop:0; 
    //create a marginTop var if it doesn t exist yet 
    window.marginTop = (window.marginTop)?marginTop:0; 
    //determine if you scroll up op down 
    let isScrollingDown = (scrollTop>oldScrollTop)?true:false; 
    //if the end of the sidebar reaches the end of the window change margin so it "sticks". It should stick until the #sidebar reaches the same height (inculding margin) as the #content. 
    if(isScrollingDown && scrollTop+windowHeight > contentOffset + sidebarHeight + marginTop){ 
    marginTop = scrollTop + windowHeight-sidebarHeight-contentOffset; 
    // check if content would be too long, if so set the maximum marginTop 
    if(marginTop>contentHeight-sidebarHeight){ 
     marginTop = contentHeight-sidebarHeight; 
     } 
    }  
    // if the start of the sidebar reaches the top while scrolling up, make it "stick" 
     else if(!isScrollingDown && scrollTop < contentOffset + marginTop){ 
     marginTop = scrollTop - contentOffset; 
     // make sure margin-top cannot go negative 
     if(marginTop<0){ 
     marginTop = 0; 
     } 
    } 
    //change the margin 
    $("#sidebar").css({'margin-top': marginTop}); 
    } 
    window.oldScrollTop = scrollTop; 
} 

Answer 2

あなたはフレックスを使用し、JavaScriptを捨てることができます。私はあなたのための簡単な例を以下に書いた。

body { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    min-height: 100vh; 
 
    width: 20%; 
 
    background: pink; 
 
} 
 

 
.content { 
 
    min-height: 100vh; 
 
    width: 80%; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="sidebar"></div> 
 
    <div class="content"></div> 
 
</div>