0

这是我的问题：

在此处输入图像描述

在一个安静的复杂网站中，这是一个简单的 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;
}

代码实际上可以工作，但从这个意义上说很难调试。在浏览器接触到我的元素的最底部之前，效果会被触发一些像素，我花了一些时间才弄清楚为什么。不幸的是，我不能使用固定值，因为窗口的变化取决于窗口的大小（网站是响应式的）。

我想知道过去是否有人遇到过我同样的问题。

谢谢

4

1 回答 1

0

您的操作相当简单，但您可能需要考虑使用scrollTop而不是 outerHeight，因为它返回元素相对于窗口顶部的位置。或者，如果您不想处理复杂问题，您可以考虑使用Waypoints之类的库。

于 2019-05-15T20:49:05.803 回答