顶部导航栏固定在顶部后下面会有阴影

这个问题通常是由于CSS样式造成的。当导航栏固定在顶部时，它会覆盖页面的其他内容，导致阴影效果失效。要解决这个问题，你可以尝试以下方法：

1. 确保导航栏具有较高的z-index值。通过将其设置为比其他元素更高的值，可以确保导航栏位于其他元素的顶部。

2. 检查导航栏的CSS属性。确保没有设置不透明度（opacity）或背景颜色的属性会影响阴影效果。

3. 检查页面中其他元素的CSS属性。确保它们不会覆盖导航栏或阻止阴影效果的显示。

如果以上方法都没有解决问题，可能需要更详细地检查你的代码和样式表。

相关问题

JS 写一个导航栏下划停留在顶部

可以通过CSS实现这个效果，具体步骤如下：

1. 为导航栏添加一个固定的位置，使其不随滚动条滚动：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

2. 在导航栏下面添加一个占位元素，使页面正常显示：

.navbar + .content {
  padding-top: 50px; /* 导航栏高度 */
}

3. 当页面滚动时，为导航栏添加一个下划线，并保持在顶部：

.navbar.scroll {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  border-bottom: 1px solid #ccc; /* 添加下划线 */
}

.navbar.scroll + .content {
  padding-top: 100px; /* 导航栏高度+下划线高度 */
}

$(document).scroll(function() {
  var navbar = $('.navbar');
  if ($(this).scrollTop() > navbar.height()) {
    navbar.addClass('scroll');
  } else {
    navbar.removeClass('scroll');
  }
});

上面的代码中，$(document).scroll()方法监控页面滚动的事件，如果scrollTop()的值大于导航栏的高度，则为导航栏添加一个scroll的CSS类，实现下划线固定在顶部的效果。

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代码中，监听窗口滚动事件，当窗口滚动距离大于导航栏距离文档顶部的距离时，添加固定定位样式类，否则移除固定定位样式类。