javascript - 当您到达滚动时的原始位置时,将位置从固定到最底部切换到 div 的初始位置
问题描述
这是我的问题:
在一个安静的复杂网站中,这是一个简单的 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;
}
代码实际上可以工作,但从这个意义上说很难调试。在浏览器接触到我的元素的最底部之前,效果会被触发一些像素,我花了一些时间才弄清楚为什么。不幸的是,我不能使用固定值,因为窗口的变化取决于窗口的大小(网站是响应式的)。
我想知道过去是否有人遇到过我同样的问题。
谢谢
解决方案
推荐阅读
- c - 数组:问题声明
- python - 在熊猫中按组仅保留某些日期之前的行
- r - 从 R 中的字符向量中删除最右边的 `.` 和数字
- android - Activity 中的两个 NavigationView 并在 AppBarLayout 中使用两个单独的按钮打开和关闭它们
- python - 如果您的 sys.path 使用相对目录,python 会在哪里查找?
- powershell - 为什么字符串作为 ArrayLists 传递
- cassandra - ScyllaDB/Cassandra 如何处理部分更新?
- ios - 自定义 SLComposeSheetConfigurationItem
- python - 如何遍历字典以在 django 的前端显示并实现用户输入
- ios - UITableView Swift 将静态部分与动态部分结合起来