如何使部分固定在滾動條上並使用頁腳向上滾動

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>