當您在滾動上到達其原始位置時，將位置從固定到最底部切換到div的初始位置

Question

這是我的問題：

在一個安靜的復雜網站上，這是一個簡單的div。 酒吧位於最底層，正好在表格之前。

基本上，我正在嘗試重新創建一個效果：

當用戶登陸頁面時，只要他滾動到底部，側邊欄就會出現在最底部：

div {
position: fixed;
left:0;
right:0;
bottom:0;
z-index:0
}

當文檔完全加載時，將會觸發簡單的東西加上這個。

我試圖讓它發生的是，當用戶將滾動到div的原始位置（最初的條形圖正好在一個表單之前），非常div會將位置切換到初始位置，並且它將被粘貼到形式使用戶會產生div從未改變位置的印象。

這是我的代碼：

HTML：

<section class="container-fluid contact-banner">
    <ul>
        <li><a href="#">
            <picture>
                <source srcset="/wp-content/themes/wpboot/images/webp/PHONE.webp" type="image/webp">
                <source srcset="/wp-content/themes/wpboot/images/PHONE.png" type="image/png"> 
                <img src="/wp-content/themes/wpboot/images/PHONE.png">
            </picture>1-855-502-2288
        </a></li>
        <li><a href="#">
            <picture>
                <source srcset="/wp-content/themes/wpboot/images/webp/i.webp" type="image/webp">
                <source srcset="/wp-content/themes/wpboot/images/i.png" type="image/png"> 
                <img src="/wp-content/themes/wpboot/images/i.png">
            </picture>Request Info
        </a></li>
    </ul>
</section>

jQuery的：

var window_height = $(window).outerHeight();//window height
var phoneBanner_position = $('.contact-banner').offset().top;//position of the element height
var phoneBanner = $('.contact-banner');//the element
var contact_banner = $('.contact-banner').outerHeight();//the height of the element

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;//height on scroll
    if(y_scroll_pos > phoneBanner_position-window_height) {//if the value of the scroll will reach the element
        phoneBanner.removeClass('fixed-banner');//remove fixed position
    } else {
        phoneBanner.addClass('fixed-banner');//add fixed position
    }
});

css是必不可少的：

.fixed-banner {
    position: fixed;
    bottom: 0;
}

代碼實際上有效，但從這個意義上來說真的很難調試。 在瀏覽器觸摸到我的元素的最底部之前，效果將被觸發一些像素，並且我花了一些時間來弄清楚原因。 不幸的是，我不能使用固定值，因為窗口將改變取決於窗口的大小（網站是響應）。

我想知道過去是否有人遇到同樣的問題。

謝謝

Answer 1

你做的相當簡單，但你可能想要使用scrollTop而不是outerHeight，因為它返回元素相對於窗口頂部的位置。 或者，如果您不想處理並發症，可以考慮像Waypoints這樣的庫。