css左右滑动或者上下滑动时固定某个标签

在CSS中，要实现一个在滚动时保持固定位置的导航栏（比如顶部），并且允许左右滑动，你可以使用`position: sticky`属性。以下是如何操作的[^1]：

/* 定义导航栏样式 */
.navbar {
  position: -webkit-sticky; /* 对于不支持sticky的旧浏览器 */
  position: sticky;
  top: 0; /* 固定在页面顶部 */
  width: 100%; /* 或者设置合适的宽度 */
  background-color: #f8f9fa; /* 可自定义背景颜色 */
  overflow-x: auto; /* 允许水平滚动 */
}

/* 当导航栏开始滚动时 */
.navbar.stuck {
  position: relative; /* 为了在内部元素有滚动时仍然保持原样 */
}

/* 左右滑动的滚动条样式 */
::-webkit-scrollbar {
  width: 12px; /* 滚动条宽度 */
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* 轨道背景色 */
}
::-webkit-scrollbar-thumb {
  background: #8a8a8a; /* 滚动条颜色 */
  border-radius: 6px; /* 圆角使看起来更美观 */
}

/* 移动设备下的触摸滑动 */
body {
  touch-action: pan-y; /* 允许垂直方向的滑动 */
}

当你滚动页面时，导航栏会保持在顶部直到其内容溢出视口，这时才会出现左右滑动的效果。