大家需要定义一个CSS样式,使得元素固定在页面上。下面是一个例子:
.fixed { position: fixed; top: 0; left: 0; }
上面的例子中,大家首先使用了position属性,将元素的定位方式改为fixed,使得元素固定在页面上。然后使用top属性和left属性,将元素放置在页面的左上角。
为了实现滑到顶部时固定元素的效果,大家需要利用一些JavaScript代码。下面是一个例子:
window.onscroll = function() { var el = document.querySelector('.fixed'); // 获取需要固定的元素 if (window.scrollY >0) { // 如果滚动距离大于0 el.classList.add('fixed'); // 添加.fixed样式 } else { // 滚动距离小于等于0 el.classList.remove('fixed'); // 移除.fixed样式 } };
上面的代码使用了window.onscroll事件,在页面滚动时不断监测滚动距离。如果滑动到顶部,就给需要固定的元素添加.fixed样式,使其固定在页面上。若还没有滑到顶部,就移除.fixed样式,使其恢复原来的定位方式。
通过上述CSS和JavaScript代码,大家可以实现页面滑到顶部时,将某个元素固定在页面上不动的效果。