jquery 判斷滾動條停止

2024年2月6日 21点热度 0人点赞
var positionTop = 0, //位置為0
  screenPage = 0, //顯示第一屏幕
  currentScrollTop =
    document.documentElement.scrollTop || document.body.scrollTop,
  currentNum = 0,
  scrollTimer = null;
function vsSideBarFixed() {
  //滾動吸頂
  var $activeSideBar = $("#hostvs");
  var navTop = 0;
  if ($activeSideBar[0]) {
    navTop = $activeSideBar.offset().top;
  }
  $(document).scroll(function () {
    clearTimeout(scrollTimer);
    currentNum = 0;
    var scrolltop =
      document.documentElement.scrollTop || document.body.scrollTop;
    // 完善
    if ($("#hostvs").length > 0 && $("#headernav .ajaxcontent").length <= 0) {
      $("#headernav").append(
        `<div class="PageHeader-ajax">${$("#hostvs").html()}</div>`
      );
    }
    if ($("#navSearchInp").length > 0) {
      $("#navSearchInp").trigger("blur");
      $(document)
        .find("#headernav")
        .addClass("navhidden")
        .removeClass("navOpacity");
    }
    if (scrolltop > navTop) {
      $(document)
        .find("#headernav")
        .addClass("is-hidden")
        .find(".PageHeader-ajax")
        .addClass("is-shown");
    } else {
      $(document)
        .find("#headernav")
        .removeClass("is-hidden")
        .find(".PageHeader-ajax")
        .removeClass("is-shown");
    }
    //設置定時器
    scrollTimer = setInterval(function () {
      //判斷是否停止滾動
      if (scrolltop == currentScrollTop && currentNum <= 5) {
        // console.log("滾動條已停止");
        $(document)
          .find("#headernav")
          .removeClass("navhidden")
          .addClass("navOpacity");
      }
      //更新位置
      currentScrollTop = scrolltop;
      // console.log(`${currentScrollTop}----${scrolltop}`);
    }, 500);
  });
}
$(function () {
  vsSideBarFixed(); //吸頂效果
});