设置边栏高度与滚动内容相同

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); 
}}}); 

但它并不是我想要做的。我想如果用户滚动20px，添加20px的边距，直到内容的底部。

如果有更简单，更好的方法来做到这一点，请让我知道。

感谢您的帮助！

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

您可以使用Flex和沟的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>