仿照Vivo官网实现前端页面交互效果实现导航栏html+css+js代码

好的，以下是实现一个类似于Vivo官网的导航栏的 HTML + CSS + JS 代码：

HTML：

<nav class="navbar">
  <a href="#" class="navbar-logo">Vivo</a>
  <ul class="navbar-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">社区</a></li>
    <li><a href="#">关于</a></li>
  </ul>
  <div class="navbar-search">
    <input type="text" placeholder="搜索">
    <button>搜索</button>
  </div>
  <button class="navbar-toggle">
    <span class="navbar-toggle-icon"></span>
  </button>
</nav>

CSS：

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

.navbar-logo {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.navbar-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar-menu li {
  margin-left: 20px;
}

.navbar-menu li a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
}

.navbar-menu li a:hover {
  color: #f00;
}

.navbar-search {
  display: none;
}

.navbar-search input[type="text"] {
  border: none;
  padding: 10px;
  margin-right: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.navbar-search button {
  border: none;
  padding: 10px;
  background-color: #f00;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.navbar-toggle {
  display: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.navbar-toggle-icon {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #333;
  margin: 3px 0;
  transition: all 0.3s ease-in-out;
}

.navbar-toggle-icon:first-child {
  margin-top: 0;
}

.navbar-toggle-icon:last-child {
  margin-bottom: 0;
}

.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.navbar-fixed .navbar-search {
  display: block;
}

.navbar-fixed .navbar-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: calc(100vh - 70px);
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  z-index: 998;
}

.navbar-fixed .navbar-menu li {
  margin-left: 0;
  margin-bottom: 20px;
}

.navbar-fixed .navbar-menu li a {
  font-size: 24px;
  color: #333;
  text-decoration: none;
}

.navbar-fixed .navbar-menu li a:hover {
  color: #f00;
}

.navbar-fixed .navbar-toggle {
  display: block;
}

.navbar-fixed .navbar-toggle-icon:first-child {
  transform: rotate(45deg) translate(6px, 6px);
}

.navbar-fixed .navbar-toggle-icon:last-child {
  transform: rotate(-45deg) translate(6px, -6px);
}

.navbar-fixed .navbar-toggle-icon:nth-child(2) {
  opacity: 0;
}

JavaScript：

var navbar = document.querySelector('.navbar');
var navbarOffsetTop = navbar.offsetTop;
var navbarToggle = document.querySelector('.navbar-toggle');

function onScroll() {
  if (window.pageYOffset >= navbarOffsetTop) {
    navbar.classList.add('navbar-fixed');
  } else {
    navbar.classList.remove('navbar-fixed');
  }
}

window.addEventListener('scroll', onScroll);

navbarToggle.addEventListener('click', function() {
  navbar.classList.toggle('navbar-menu-open');
});

以上代码实现了一个类似于Vivo官网的导航栏，具有响应式布局和下拉菜单功能。当页面滚动时，导航栏会固定在页面顶部并且搜索框和下拉菜单会出现。在移动设备上，用户可以点击菜单按钮打开下拉菜单。