滚动置顶元素
首先设置父元素为相对定位
.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')
}
}
}