时间戳

首页 > 解决方案 > 如何检查多 div 滚动到顶部？

javascript - 如何检查多 div 滚动到顶部？

问题描述

我的页面上有多个具有不同类的 div 我
如何检查哪个 div 滚动到顶部并因此做一些事情。

<div class="menu-session-0">
  content
</div>
<div class="menu-session-1">
  content
</div>
<div class="menu-session-2">
  content
</div>

我已经试过了：

$(window).scroll(function() {
  setTimeout(function(){
    var hT = $('.session-index_1').offset().top,
    hH = $('.session-index_1').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop() + 175;
    if(hT <= (wS + 250)){
      $('.menu-item').removeClass('menu-item_active');
      $('.item-index-1').addClass('menu-item_active');
      mySwiper.slideTo(1);
      mySwiper.update();
    }
  },1050);
});

但它并没有像我预期的那样工作......

标签： javascriptjquery

解决方案

好的..我现在明白了，我想.. :P

如果您复制和粘贴而不是您的代码，这应该（理论上）工作得很好。

如果您真的想使用 JQuery，只需替换元素引用 getter 和类编写器

const menuItems = document.getElementsByClassName('menu-item');
const menuSessions = document.getElementsByClassName('menu-session');

var nextSession, activeSession;

// do this to get menu-session offsets.. rerun function on viewport resize
function getSessionOffset() {
    for( let session of menuSessions ) {
        // store position and dataset.index directy on the element reference
        session.y = session.offsetTop;  
        session.indx = session.dataset.index;
    }
    // define active elements which position we listen for
    // these are correct if the window scroll offset is 0 (or at the top)
    activeSession = menuSessions[0];
    nextSession = menuSessions[1];
    onScroll(window.pageYOffset);       // so we check and set the correct active elements
}
getSessionOffset();

// page scroll listener
window.addEventListener( 'scroll' , ScrollHandler );

var lastScrollPos = 0;      // last recorded window scroll offset
var scrollTick = false;     // the tick is used to throttle code execution

function ScrollHandler (ev) {
    lastScrollPos = ev.target.scrollTop;

    if (!scrollTick) {
        window.requestAnimationFrame(() => {        // <- read up on this if you are not familiar. Very usefull
            onScroll(lastScrollPos);
            scrollTick = false;
        });
        scrollTick = true;
    }
}

function onScroll(scrollY) {
    if (scrollY > nextSession.y) {  // if lower offset is less than scrollPos
        removeActiveClass(activeSession.indx);      // we remove the active class from menu item

        activeSession = menuSessions[nextSession.indx];     // define new elements to listen for
        nextSession = menuSessions[nextSession.indx + 1];

        addActiveClass(activeSession.indx);     // and add an active class to the new menu item

    } else if (scrollY < activeSession.y) {     // do the same here only in reverse
        removeActiveClass(activeSession.indx);

        nextSession = menuSessions[activeSession.indx];
        activeSession = menuSessions[nextSession.indx - 1];

        addActiveClass(activeSession.indx);
    }
}

function removeActiveClass(indx) {
    menuItems[indx].classList.remove('menu-item_active');
}
function addActiveClass(indx) {
    menuItems[indx].classList.add('menu-item_active');
}

我们只监听当前值和下一个值。这可能看起来很多，但可以缩短到三分之一的大小。

希望这可以帮助 ：）

推荐阅读