使用 scroll throttle, 遇到问题,求帮助

遇到问题的网址
https://jerryc.me/posts/20bbe8ff/

在手机上(我测试的safari)当我向上快速滑动时,原本page-header应该是在银幕外的,但是不知道为什么,现在page-header出现在银幕内,一闪一闪。。直接用scroll 不用throttle时,运行正常

image

function throttle(func, wait, mustRun) {
  var timeout
  var startTime = new Date()

  return function () {
    var context = this
    var args = arguments
    var curTime = new Date()

    clearTimeout(timeout)
    if (curTime - startTime >= mustRun) {
      func.apply(context, args)
      startTime = curTime
    } else {
      timeout = setTimeout(func, wait)
    }
  }
};

 // main of scroll
  $(window).scroll(throttle(function (event) {
    var currentTop = $(this).scrollTop()
   
    var isUp = scrollDirection(currentTop)

    if (currentTop > 56) {
      if (isUp) {
        $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()

      } else {
        $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
      }
      $('#page-header').addClass('fixed')

     
    } else {
      if (currentTop === 0) {
        $('#page-header').removeClass('fixed').removeClass('visible')
      }

    }

  }, 50, 100))

css
image.png
image.png

阅读 1.7k
1 个回答

throttle 函数写错了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题