jquery - 将侧边栏高度设置为与滚动内容相等

Question

有时我的内容 div 的高度大于侧边栏高度并且它不好看。

如果内容高度大于侧边栏，我想在页面滚动时将 margin-top 添加到侧边栏，直到内容底部

我试着用这段代码来做到这一点:

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 边距直到内容底部。

如果有更简单、更好的方法来做到这一点，请告诉我。

感谢您的帮助!

更新:

这是我的#content-left 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 的定位。您可以在滚动、调整窗口大小等时运行它。我认为如果有人想使用此代码，这将非常有用。

只需更改变量:

• 内容高度
• 侧边栏高度
• 内容偏移量

你就大功告成了:).

随时欢迎就此提出进一步改进的建议。

JS-Fiddle

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