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

小蓝 • 2024-12-01 10:29 • 编程

一、什么是 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>


.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 9999;
}

通过将顶部导航栏的 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>


.sidebar {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sidebar ul {
  padding: 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.08);
}
.sidebar li {
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;
}

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

3. 固定返回顶部按钮

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


.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #ccc;
  border: none;
  outline: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}



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);
});

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

三、总结

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

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192731.html