Javascript 基于多事件的jQuery滚动函数

假设我有一些结构如下的

div

<main>
   <header id="foo"></header>
   <article id="bar"></bar>
   <div id="someDiv"></div>
   <div id="stickyDiv"></div>
   <footer id="bikiniBottom"></footer>

在这种情况下，我想问一下，如何使早期的脚本仅在到达

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";
}

var$el=$（'#bar'）；
var top=$el.position（）.top；
var bottom=top+$el.height（）；
if（Math.abs（top-$（window.scrollTop（））<5）{
console.log（'Bar位于顶部'）；
document.getElementById（“stickyDiv”）.style.bottom=“0”；
} 
if（Math.abs（底部-$（窗口）.scrollTop（））<5）{
log（'Bar消失在视野之外'）；
document.getElementById（“stickyDiv”）.style.bottom=“-80px”；
}

请您附上jsfiddle对不起，我不确定是否正确放置了代码，但代码似乎不起作用。请使用上面的代码作为参考，以获得您想要的内容。使用JSFIDLE测试代码很困难

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";
}