使用 fixed positioning 实现网页元素的固定位置

一、什么是 fixed positioning

Fixed positioning 是指将元素固定在页面上的某个位置，不随页面滚动而移动的一种 CSS 布局方式。使用 fixed positioning 最常见的场景是固定导航栏、侧边栏或广告等元素。

在使用 fixed positioning 时，需要指定元素的 left、right、top 和 bottom 四个位置属性。同时，元素的位置参照于浏览器窗口而非文档流。

二、如何使用 fixed positioning 实现网页元素的固定位置

1. 固定顶部导航栏

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

通过将顶部导航栏的 position 属性设置为 fixed、top 和 left 属性设置为 0，即可将导航栏固定在浏览器窗口的顶部。

2. 固定侧边栏

<div class="sidebar">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
</div>

通过将侧边栏的 position 属性设置为 fixed、top 属性设置为 50%、transform 属性设置为 translateY(-50%)，即可将侧边栏垂直居中。此外，还需将 left 属性设置为 0，将侧边栏固定在浏览器窗口的左侧。

3. 固定返回顶部按钮

<button class="back-to-top"><i class="fa fa-arrow-up"></i></button>



<script>
const backToTop = document.querySelector('.back-to-top');

window.addEventListener('scroll', function() {
  if (window.scrollY > 500) {
    backToTop.classList.add('active');
  } else {
    backToTop.classList.remove('active');
  }
});

backToTop.addEventListener('click', function() {
  window.scrollTo(0, 0);
});
</script>

通过将返回顶部按钮的 position 属性设置为 fixed，bottom 和 right 属性分别设置为距离浏览器窗口底部和右侧的距离，即可将按钮固定在浏览器窗口的右下角。此外，还可以通过监听 window 对象的 scroll 事件，来判断用户是否已滚动了一定距离，并根据情况控制按钮的显示与隐藏。

三、总结

以上是使用 fixed positioning 实现网页元素的固定位置的一些例子。通过设置 position、top、left、bottom 和 right 等属性，可以实现固定顶部导航栏、侧边栏、返回顶部按钮等元素。但同时也需要注意，元素的固定位置可能会影响其他元素的布局，因此在实际应用中需要根据具体情况进行适当的处理。