前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

jquery 判断滚动条停止(jquery 监听滚动条滚动事件)

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(); //吸顶效果
});

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言