首页创建一个导航栏，包含影院、电影和个人中心三个选项，这个导航栏距离页面顶部200px,当导航栏滚动到页面顶部时，会自动吸附在顶部不会消失。（10分）

创建一个导航栏，包含影院、电影和个人中心三个选项，这个导航栏距离页面顶部200px,当导航栏滚动到页面顶部时，会自动吸附在顶部不会消失。（10分）

时间: 2024-03-11 10:50:53 浏览: 83

好的，这是一个前端开发的问题，我可以为您提供一个基础的 HTML 和 CSS 代码，如下所示： ```html <!DOCTYPE html> <html> <head> <title>Navigation Bar</title> <style> body { margin: 0; padding: 0; } .navbar { position: fixed; top: 200px; width: 100%; background-color: #333; color: #fff; display: flex; justify-content: space-around; padding: 10px 0; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .navbar.sticky { top: 0; position: fixed; } .navbar ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .navbar li { margin: 0 10px; cursor: pointer; font-size: 1.2rem; } </style> </head> <body> <div class="navbar"> <ul> <li>影院</li> <li>电影</li> <li>个人中心</li> </ul> </div>  <script> window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar'); if (window.pageYOffset > 200) { navbar.classList.add('sticky'); } else { navbar.classList.remove('sticky'); } }) </script> </body> </html> ``` 这个代码中，我们先定义了一个 `navbar` 类，包含了三个选项，使用了 Flex 布局。然后使用了 CSS 的 `position: fixed` 属性将导航栏固定在页面上部，并且设置了 `top: 200px` 将其与页面顶部距离为 200px。最后，使用了 JavaScript 监听页面滚动事件，当滚动距离大于 200px 时，为导航栏添加 `sticky` 类，将其固定在页面顶部。

阅读全文