让你的小程序导航滚动更出色：固定第一个标签并添加阴影效果

2024-02-19 20:45:00

滚动的导航效果很常见，这次给导航多加了点花样，固定第一个元素，其他的正常横向滚动，固定元素的右侧会有一个随滚动出现的阴影。下面，我将分步介绍如何实现这一效果。

HTML 结构

首先，我们需要创建一个基本的 HTML 结构来容纳我们的导航栏。

<div class="navbar">
  <div class="navbar-fixed">
    <div class="navbar-item">固定</div>
  </div>
  <div class="navbar-scroll">
    <div class="navbar-item">1</div>
    <div class="navbar-item">2</div>
    <div class="navbar-item">3</div>
  </div>
</div>

.navbar 类是导航栏的父容器。
.navbar-fixed 类是固定元素的容器。
.navbar-scroll 类是滚动元素的容器。
.navbar-item 类是导航栏中的每个项目。

CSS 样式

接下来，我们需要为我们的导航栏添加一些 CSS 样式。

.navbar {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #333;
  color: #fff;
}

.navbar-fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 50px;
  background-color: #444;
}

.navbar-scroll {
  position: relative;
  left: 100px;
  height: 50px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.navbar-item {
  display: inline-block;
  padding: 10px;
}

.navbar-item:not(:first-child) {
  margin-left: 10px;
}

.navbar-shadow {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.navbar-scroll:hover .navbar-shadow {
  opacity: 1;
}

.navbar 类定义了导航栏的整体样式。
.navbar-fixed 类定义了固定元素的样式。
.navbar-scroll 类定义了滚动元素的样式。
.navbar-item 类定义了导航栏中每个项目的样式。
.navbar-shadow 类定义了阴影的样式。

JavaScript

最后，我们需要添加一些 JavaScript 代码来实现滚动效果。

const navbarScroll = document.querySelector('.navbar-scroll');
const navbarShadow = document.querySelector('.navbar-shadow');

navbarScroll.addEventListener('scroll', function() {
  const scrollLeft = navbarScroll.scrollLeft;
  const scrollWidth = navbarScroll.scrollWidth;
  const clientWidth = navbarScroll.clientWidth;

  if (scrollLeft > 0) {
    navbarShadow.style.opacity = 1;
  } else {
    navbarShadow.style.opacity = 0;
  }
});