美文网首页JavaScript
用jq实现当鼠标往下滚动时头部隐藏,往上则出现

用jq实现当鼠标往下滚动时头部隐藏,往上则出现

作者: Lia代码猪崽 | 来源:发表于2018-07-13 20:10 被阅读47次
const debounce = function(idle, action) {
  let last
  return function() {
    const ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function() {
      action.apply(ctx, args)
    }, idle)
  }
}

window.addEventListener('scroll', debounce(50, function(e) {
    let scrollY = 0
    if (window.scrollY) {
        scrollY = window.scrollY
    } else {
        scrollY = $(document).scrollTop()
    }
    if (scrollY < 50) {
        return $header.stop().slideDown('fast')
    }
    e.target.oldScrollTopPosition = e.target.scrollTopPosition || 0
    e.target.scrollTopPosition = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0) || 0
    let direction = 'down'
    if (e.target.scrollTopPosition - e.target.oldScrollTopPosition < 0) {
        direction = 'up'
    }
    if (e.target.scrollTopPosition > 0) {
        if (direction === 'down') {
            $header.stop().slideUp('fast')
        } else {
            $header.stop().slideDown('fast')
        }
    }
}))

相关文章

网友评论

    本文标题:用jq实现当鼠标往下滚动时头部隐藏,往上则出现

    本文链接:https://www.haomeiwen.com/subject/pkvspftx.html