基于多事件的jQuery滚动功能
基于多事件的jQuery滚动功能
提问于 2018-08-21 10:07:17
假设我有一些div，其结构如下
<main>
<header id="foo"></header>
<article id="bar"></bar>
<div id="someDiv"></div>
<div id="stickyDiv"></div>
<footer id="bikiniBottom"></footer>
stickyDiv是位于页面底部的元素。只有当用户使用javascript向下滚动页面时，它才会出现，当用户滚动到顶部时，它会消失
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("stickyDiv").style.bottom = "0";
} else {
document.getElementById("stickyDiv").style.bottom = "-80px";
}
prevScrollpos = currentScrollPos;
}在这种情况下，我想问一下如何使前面的脚本只在到达bar元素时才起作用，然后在到达页脚之前再次消失
谢谢
回答 1
Stack Overflow用户
发布于 2018-08-21 10:41:12
这取决于你所说的到达bar元素是什么意思。我假设你的意思是，当bar到达顶部时，显示页脚并隐藏页脚，然后bar就会消失。我已经包括了一个范围，因为有时滚动位置可能会错过，如果用户滚动快。请根据您的需要随意调整
你可以这样做，
var $el = $('#bar');
var top = $el.position().top;
var bottom = top + $el.height();
if(Math.abs(top - $(window).scrollTop()) < 5) {
console.log('Bar is at the top');
document.getElementById("stickyDiv").style.bottom = "0";
}
if(Math.abs(bottom - $(window).scrollTop()) < 5) {
console.log('Bar went out of view');
document.getElementById("stickyDiv").style.bottom = "-80px";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51946301
复制
相似问题
多滚动事件jQuery
基于滚动鼠标位置的功能
jQuery滚动事件
jQuery -滚动事件
滚动事件的jquery
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
