当元素底部边缘滚动到视图中时，固定元素

Make elements fixed when their bottom edge scrolls into view

本文关键字：元素 底部 边缘 滚动 视图      更新时间：2023-09-26

这个可能看起来很复杂，我会尽力解释的!

我正在尝试按照彭博政治(http://www.bloomberg.com/politics/articles/2015-07-02/fact-checking-rick-perry-s-economic-speech)的相同路线连续滚动显示文章，但格式略有不同。

而不是下一篇文章是静态的，直到最后一篇已经滚动离开，我希望当前文章的底部边缘变得粘/固定到视窗的底部和新文章滚动在它的顶部。

我已经尝试了一个jsfiddle，试图说明我到了哪里，我的意思是.....

<div class="wrapper">
    <article class="article article--one">
        Text text text text text text text text text
    </article>
    <article class="article article--two">
        Text text text text text text text text text
    </article>
</div>

.wrapper {
    padding: 8px;
    position: relative;
}
.article {
    width: calc(100% - 48px);
    min-height: 1200px;
    background: #ddd;
    padding: 24px;
}
.article--two {
    background: #f5f5f5;
}
.scroll {
    position: relative !important;
    top: auto !important;
    margin-top: 1248px !important;
    float: left !important;
    left: 0 !important;
    right: 0 !important;
}

$(window).scroll( function() {    
    $('.article').each( function(i) {    
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        var height = $(this).outerHeight();
        var secondheight = $('.article--two').outerHeight();
        var down = bottom_of_object;
        if (bottom_of_window > bottom_of_object) {     
            $(this).css({
                'position': 'fixed',
                'bottom': '0',
                'left': '16px',
                'right': '16px'
            });
            $('.article--two').addClass('scroll');    
        }    
    });     
});

JsFiddle

任何帮助将不胜感激!这似乎有点复杂!

欢呼!

没有经过优化，在移动端也不会有很好的效果，但是效果不错。

$window = $(window).on('scroll', function () {
    var scroll = $window.scrollTop() + $window.height();
    
    $('li').each(function (i) {
       var $el = $(this),
           offset = scroll - $el.offset().top - $el.height();
       $el.children().css('top', offset>0 ? offset : 0);
    });
});
body {
  margin: 0;
}
ul {
  position: relative;
  display: block;
  text-align: center;
  counter-reset: page;
  padding: 0;
  margin: 0;
}
li {
  height: 150vh;
  list-style: none;
  background: green;
  position: relative;
  margin: 0;
  padding: 0;
}
li:nth-child(even) {
  background: blue;
}
article {
  position: relative;
  height: 100%;
  width: 100%;
  background: inherit;
}
article:before {
  counter-increment: page;
  content: "Page " counter(page);
  font-size: 1.6em;
  color: white;
  top: 50%;
  margin-top: -0.5em;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <article></article>
  </li>
  <li>
    <article></article>
  </li>
  <li>
    <article></article>
  </li>
</ul>

相关文章：