Question

#container（position：relative）里面我有2个div：两个都是50％宽，＃first first非常高（位置：相对）而#second one至少是2000px高。

有没有办法让#second在达到底部时停止滚动，但是继续滚动其他内容？没有为它制作额外的父级div会很棒。小提琴：https://jsfiddle.net/Moor/ha4zybpb/

＆＃13;

#container{
    position:relative;
}
#first{
    width:50%;
    background:#333;
    height:10000px;
}
#second{
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:2000px;
    background:limegreen;
}

＆＃13;

<div id="container">
    <div id="first"></div>
    <div id="second"></div>
</div>

＆＃13;

Answer 1

实现此目的的一种方法是使用position:sticky - 但请务必检查browser compatability是否符合您的要求。

*{margin:0;padding:0;}
#first{
    background:#333;
    display:inline-block;
    height:10000px;
    vertical-align:bottom;
    width:50%;
}
#second{
    background:linear-gradient(0deg,#f00,#090);
    bottom:0;
    display:inline-block;
    height:2000px;
    position:sticky;
    vertical-align:bottom;
    width:50%;
}

<div id="container"><div id="first"></div><div id="second"></div></div>

Answer 2

jquery“粘性”解决方案..

https://jsfiddle.net/cusjptLr/4/

var sh = $('#second').height();
$(window).scroll(function(){
  if (($(window).scrollTop() + $(window).innerHeight()) >= sh) {
   $('#second').addClass("sticky");
  }
});

#second.sticky {
  position: fixed;
  bottom: 0;
  top: initial;
}

Answer 3

这不是一个完整的答案，但它可能会帮助你 - 检查滚动位置和视口高度，并将其与第二个元素的高度进行比较 -

为我的例子检查这个小提琴。用jquery完成

updated fiddle

$( document ).ready(function() {
console.log( "ready!" );
var secondHeight = $('#second').height();
console.log(secondHeight);

var stopper = 0;

$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var viewportHeight = $(window).height();
    // Do something
  console.log(scroll+viewportHeight);



  if(secondHeight <= scroll+viewportHeight) {
  console.log('stop it here');
  stopper = 1;
  } else {
  stopper = 0;
  }
  console.log(stopper);

  if(stopper == 1) {
   $('#second').css('position','fixed');
   console.log('making it fixed');
  } else {
   $('#second').css('position','absolute');
   console.log('making it absolute');
  }


    });


});

如何停止滚动比窗口高度更长的div？

3 个答案: