滾動到該 div 后如何使 div 切換到底部固定？

Question

今天是個好日子。 我試圖在上下滾動時將我的 div 切換到底部的固定 div 。

我發現了這個堆棧溢出主題，它完成了我正在嘗試做的事情，但在此處的頂部。

代碼：

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

$(window).scroll(function() {                  // assign scroll event listener

    var currentScroll = $(window).scrollTop(); // get current position

    if (currentScroll >= fixmeTop) {           // apply position: fixed if you
        $('.fixme').css({                      // scroll to that element or below it
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   // apply position: static
        $('.fixme').css({                      // if you scroll above it
            position: 'static'
        });
    }

});

經過多次嘗試和許多文章紅色后，我無法將其調整為固定在底部（對 javascript 來說有點新）。 所以我請求你的幫助。

Answer 1

嘿，你可以這樣做

const heightOfText = 15
if (currentScroll >= fixmeTop - $(window).height() + heightOfText) {
   $('.fixme').css({
       position: 'fixed',
       bottom: '0',
       left: '0'
   });
}

因此，當您在文本底部看到.fixme時，它會以bottom: '0'附加到底部。 讓我知道它是否有幫助。

Answer 2

您可以使用position: sticky

 /*QuickReset*/ *{margin:0;box-sizing:border-box;}.content { min-height: 200vh; border: 4px dashed #000; }.sticky-bottom { position: sticky; bottom: 0; padding: 2em 0; background: #0bf; }

 <div> <div class="content"> 1. Lorem ut florem... </div> </div> <div> <div class="content"> 2. Lorem ut florem... </div> <div class="sticky-bottom">Stick me when in viewport</div> </div>