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的定位。您可以在滚动，窗口大小调整等运行它。我认为这将非常有用，以防任何人想要使用此代码。

只需更改变量：

或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>

设置侧边栏高度与滚动

2 个答案: