如何停止固定位置滚动到页脚

Question

我已经进行了大量的研究，但似乎无法弄清楚为什么这对我不起作用。

我有两个div元素。其中一个div具有“position: fixed”以使其始终保持在窗口中。

一旦div碰到页脚，它应该删除固定滚动并粘附到页脚的顶部。我尝试使用此示例中找到的代码，但当div到达页脚时，它只是回弹到页面顶部。

以下是一个示例fiddle：

$(document).scroll(function (){
  if($('.userInfo').offset().top + $('.userInfo').height() >= $('footer').offset().top - 10){
    $('.userInfo').css('position', 'absolute');
  }
        
  if($(document).scrollTop() + window.innerHeight < $('footer').offset().top){
    $('.userInfo').css('position', 'fixed');
  } 
});

.profileMain{
    display: flex;
}

.userInfoContainer{
    height: 100%;
    width: 50%;
    display: inline-block;
}

.userInfo{
    background: red;
    width: 50%;
    position: fixed;
}

.userContent{
    background: blue;
    width: 50%;
    margin-bottom: 10em;
}

footer{
  background: gray;
  width: 100%;
  height: 30em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class = "profileMain">
  <div class = "userInfoContainer">
    <div class = "userInfo">f</div>
  </div>
  <div class = "userContent">f</div>
</div>

<footer></footer>

有人能解释一下我在这里做错了什么吗？

- Jaxon Crosmas

---

我没有看到你在将位置设置为fixed时设置顶部位置。它会默认到页面的顶部。要修复这个问题，在您的页脚CSS中，设置您需要的顶部和左侧位置。 - Korgrue

@Korgrue 我不确定你的意思。这不是 jQuery 代码的问题吗？当它触及页脚时，我尝试设置 bottom: 0，但也没有任何效果。 - Jaxon Crosmas

Answer 1

要做与您提供的示例相反的操作（将div粘贴到顶部而不是底部），请从第二个if中删除window.innerHeight，并将滚动量+元素高度与页脚的offset进行比较，使用top和bottom定位将div放置在所需位置即可。以下代码应该可以解决问题：

$(document).scroll(function() {
  if ($('.userInfo').offset().top + $('.userInfo').height() >= $('footer').offset().top - 10)
    $('.userInfo').css({
      'position': 'absolute',
      'bottom': 0,
      'top': 'auto'
    });

  if ($(document).scrollTop() + $('.userInfo').height() < $('footer').offset().top)
    $('.userInfo').css({
      'position': 'fixed',
      'top': 0,
      'bottom': 'auto'
    }); // restore when you scroll up
});

这里有一个示例代码：https://jsfiddle.net/xpvt214o/93144/

- Taki

---

抱歉，我在问题中漏掉了一个关键点。一旦 div 到达页脚，我想要移除固定定位并将其粘贴到页脚顶部。我已经编辑了问题以包括这一点。 - Jaxon Crosmas

如果是这样的话 https://jsfiddle.net/xpvt214o/93144/？那我会更新答案。 - Taki

是的，这就是我要找的。谢谢。一旦更新，我会选择它作为正确答案。 - Jaxon Crosmas

你搞定了，兄弟 ;) - Jaxon Crosmas

但是这段代码存在一个问题，你需要在第二个if条件语句之后执行第一个if条件语句，将它们互换位置。 - Sushin Pv