Question

我有一个带有两个子div的父div。当父级在视口中时，应修复第一个子级。第二个孩子应滚动到位并与第一个重叠。两个子div都应该被移除，并且一旦到达父母的底部就跟随父母。

现在，我在滚动位置上添加了一个类但是我不确定如何检测孩子何时在父母的底部，然后删除该类。

var sticky = $('.sticky'),
  scroll = $(window).scrollTop();

if (scroll >= 70) {
    sticky.addClass('fixed');
} else {
    sticky.removeClass('fixed');
}

如何让孩子以最好的方式跟随父母？我试图寻找类似我想要的东西，却找不到任何好的解释。

这fiddle是我到目前为止所得到的。

Answer 1

如果我正确理解了这一点，那么您可以做的是衡量父bottom的{{1}}和相对于div的儿童粘性div，以及子元素的底部越过父母的底部，您可以删除document.body课程。

像这样。

.fixed

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();
  if (scroll >= 70) {
  sticky.addClass('fixed')
  }else {
  sticky.removeClass('fixed');
  }
  if(getBottom('.sticky') >= getBottom('.holder')){
  	sticky.removeClass('fixed');
  }
});

function getBottom(element){
  var $elm = $(element);
  var offset = $elm.offset();
  var top = offset.top;
  return top + $elm.outerHeight();

}

body { margin: 0; }

section { 
  height: 2000px;
  padding-top: 100px; 
}

div {
  width: 300px;
  height: 100px;
}

.holder {
  border: 1px solid black;
  width: 500px;
  height: 200px;
  position: relative;
}

.sticky { 
  top:30px; 
  left:10px;
  background: orange; 
  z-index: 9999;
  position: relative;
}

.other-div {
  background: gold;
  top: 20px;
  z-index: 0;
}

.fixed {
  position: fixed;
}

上述代码段的{Jsfiddle} https://jsfiddle.net/azs06/3ubshm4t/7/ 请注意，我做了一些css更改，您可以根据需要进行调整。

根据父位置滚动div

1 个答案: