JS做今日头条2023app上的顶部导航栏效果

以下是一个简单的示例代码，实现了今日头条2023app上的顶部导航栏效果：

HTML代码：

<nav class="navbar">
  <div class="navbar-brand">
    <img src="logo.png" alt="logo">
  </div>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a href="#">推荐</a>
    </li>
    <li class="nav-item">
      <a href="#">视频</a>
    </li>
    <li class="nav-item">
      <a href="#">热点</a>
    </li>
    <li class="nav-item">
      <a href="#">社会</a>
    </li>
    <li class="nav-item">
      <a href="#">科技</a>
    </li>
    <li class="nav-item">
      <a href="#">汽车</a>
    </li>
    <li class="nav-item">
      <a href="#">体育</a>
    </li>
    <li class="nav-item">
      <a href="#">财经</a>
    </li>
    <li class="nav-item">
      <a href="#">军事</a>
    </li>
    <li class="nav-item">
      <a href="#">国际</a>
    </li>
    <li class="nav-item">
      <a href="#">时尚</a>
    </li>
    <li class="nav-item">
      <a href="#">旅游</a>
    </li>
    <li class="nav-item">
      <a href="#">育儿</a>
    </li>
    <li class="nav-item">
      <a href="#">养生</a>
    </li>
    <li class="nav-item">
      <a href="#">美食</a>
    </li>
    <li class="nav-item">
      <a href="#">历史</a>
    </li>
  </ul>
  <div class="navbar-right">
    <a href="#">登录</a>
    <a href="#">注册</a>
  </div>
</nav>

CSS代码：

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar-brand img {
  height: 40px;
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: 20px;
}

.nav-item a {
  display: block;
  padding: 10px 12px;
  color: #333;
  font-size: 16px;
  text-decoration: none;
}

.nav-item.active a {
  color: #e54847;
  border-bottom: 2px solid #e54847;
}

.navbar-right a {
  display: inline-block;
  margin-left: 20px;
  padding: 8px 12px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.navbar-right a:hover {
  background-color: #f5f5f5;
}

JS代码：

// 获取导航栏元素
const navbar = document.querySelector('.navbar');
// 获取导航栏距离文档顶部的距离
const navbarOffsetTop = navbar.offsetTop;
// 监听窗口滚动事件
window.addEventListener('scroll', function() {
  // 获取窗口滚动距离
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 判断窗口滚动距离是否大于导航栏距离文档顶部的距离
  if (scrollTop > navbarOffsetTop) {
    // 如果大于，添加固定定位样式类
    navbar.classList.add('navbar-fixed');
  } else {
    // 否则，移除固定定位样式类
    navbar.classList.remove('navbar-fixed');
  }
});

说明：

- HTML代码中，导航栏包含一个品牌logo、一个左侧导航菜单、一个右侧登录注册按钮组成。
- CSS代码中，定义了导航栏的样式，包括背景颜色、阴影、内边距、菜单样式等。
- JS代码中，监听窗口滚动事件，当窗口滚动距离大于导航栏距离文档顶部的距离时，添加固定定位样式类，否则移除固定定位样式类。