Toc
  1. 首先设置父元素为相对定位
  2. 设置一个 fixed 的 class
  3. jqeury 伪代码
  4. JS 原生代码实现
Toc
0 results found
Utone
滚动置顶元素
2019/01/30 Code JavaScript

首先设置父元素为相对定位

.parent {
  position: relative;
  top: 10rem;
}

设置一个 fixed 的 class

.fixed {
  position: fixed;
  top: 2rem;
}

jqeury 伪代码

$(document).ready(function() {
  // 元素距离屏幕顶端的高度
  var _offectTop = $('.introduce').offset().top

  // 滚动事件
  $(document).scroll(function() {
    // 滚动距离document的top高度
    var _scrollTop = $(document).scrollTop()

    // 32 为距离顶部的流出的距离相当于2rem
    if (_scrollTop >= _offectTop - 32) {
      $('.introduce').addClass('fixed')
    } else {
      console.log(1)
      $('.introduce').removeClass('fixed')
    }
  })
})

JS 原生代码实现

/**
 * 目前将父元素设置margin-top,不设置相对定位,解决锚点bug
 * todo目前遇到BUG,点击锚点后,元素置顶了
 **/
window.onload = function() {
  /**
   * 原生offsetTop取值为相对于父元素, jquery的offset().top是取的距离屏幕顶部的距离
   * 所以这里取父元素的offestTop
   **/
  var _parentDom = document.getElementById('main-left')
  var _offectTop = _parentDom.offsetTop

  var _needTopDom = document.getElementById('introduce')

  window.onscroll = function() {
    /**
     * 获取滚动距离document的高度
     *
     * 声明了<!DOCTYPE html>,使用document.documentElement.scrollTop
     * 没有声明,使用document.body.scrollTop
     **/
    var _scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop

    // 32为距离顶部的流出的距离相当于2rem
    if (_scrollTop > _offectTop - 32) {
      _needTopDom.classList.add('fixed')
    } else {
      _needTopDom.classList.remove('fixed')
    }
  }
}
打赏
支付宝
微信
本文作者:Utone
版权声明:本文首发于Utone的博客,转载请注明出处!