如何使部分固定在滚动条上并使用页脚向上滚动

Question

我正在为几个项目解决这个问题。 我试图在 StackOverflow 上找到解决方案，但有两个部分

1. 在卷轴上固定
2. 使用页脚向上滚动
3. 最后，找出并尝试分享。

希望它能帮助别人。

<div class="col-md-5 offset-md-1">
    <div id="listing_preview">
...
    </div>
</div>

页脚

<footer class="p-5 footer">
....
</footer>

Answer 1

我研究了这个问题并找到了这个解决方案。 CSS

<style>
div.sticky {
    position: fixed;
    top: 50px;
}
</style>

<script>
    window.onscroll = function() {myFunction()};
    
    var product_preview = document.getElementById("listing_preview");
    var sticky = product_preview.offsetTop;
    
    function myFunction() {
      if (window.pageYOffset > sticky +100) {
        product_preview.classList.add("sticky");
      } else {
        product_preview.classList.remove("sticky");
      }
    }



var originalBottom = 30; // get this depending on your circumstances
var footerHeight = $('.footer').height() // get this depending on your circumstances

$(window).scroll(function () { // start to scroll
  // calculating the distance from bottom
  var distanceToBottom = $(document).height() - $(window).height() - $(window).scrollTop();

  if (distanceToBottom <= footerHeight) // when reaching the footer
    $("#listing_preview").css('top', '-'+ (footerHeight - distanceToBottom) + 'px');
  else // when distancing from the footer
    $("#listing_preview").css('top',  originalBottom + 'px'); 
    // only need to specify 'px' (or other unit) if the number is not 0
});

</script>