页面滑动导航栏跟着走效果

要实现页面滑动导航栏跟着走效果，可以使用JavaScript监听页面的滚动事件，然后根据滚动的位置来动态修改导航栏的样式。

具体实现方法如下：

1. 给导航栏添加一个固定定位（position: fixed），这样它就会一直保持在页面的顶部或底部。

2. 监听页面的滚动事件（scroll），可以使用addEventListener方法来实现。

3. 在滚动事件的回调函数中，获取当前页面的滚动位置（scrollTop），然后根据滚动的位置来修改导航栏的样式，比如修改它的背景色、字体颜色、边框等。

4. 可以使用CSS3的过渡效果（transition）来实现导航栏的平滑过渡，让它的样式变化更加自然流畅。

下面是一个示例代码：

HTML

<div class="nav-bar">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

<div id="home">
  <h1>Welcome to my website!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque et eleifend sagittis, massa sapien gravida urna, et dignissim velit odio non tortor.</p>
</div>

<div id="about">
  <h2>About Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque et eleifend sagittis, massa sapien gravida urna, et dignissim velit odio non tortor.</p>
</div>

<div id="services">
  <h2>Our Services</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque et eleifend sagittis, massa sapien gravida urna, et dignissim velit odio non tortor.</p>
</div>

<div id="contact">
  <h2>Contact Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque et eleifend sagittis, massa sapien gravida urna, et dignissim velit odio non tortor.</p>
</div>

CSS

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.nav-bar ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-bar li {
  margin: 0 20px;
}

.nav-bar a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-bar a:hover {
  color: #fff;
  background-color: #333;
}

#home {
  height: 500px;
  background-color: #f2f2f2;
}

#about {
  height: 500px;
  background-color: #d9d9d9;
}

#services {
  height: 500px;
  background-color: #bfbfbf;
}

#contact {
  height: 500px;
  background-color: #a6a6a6;
}

JavaScript

var navBar = document.querySelector('.nav-bar');

window.addEventListener('scroll', function() {
  if (window.scrollY >= 100) {
    navBar.classList.add('nav-bar-scroll');
  } else {
    navBar.classList.remove('nav-bar-scroll');
  }
});

以上示例代码中，首先给导航栏添加了一个.nav-bar-scroll的样式，用于在滚动时修改导航栏的样式。然后在JavaScript中监听了页面的scroll事件，根据滚动的位置来修改导航栏的样式。最后通过CSS3的过渡效果来实现导航栏的平滑过渡。