Question

让我说一些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元素时才起作用，然后在到达页脚之前再次消失

谢谢

Answer 1

取决于到达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";
}

基于多个事件的jQuery滚动功能

1 个答案: