html侧栏悬浮代码

HTML侧栏悬浮可以提高网站的用户体验，让页面更加美观。下面是一个HTML侧栏悬浮的代码示例。首先，在HTML的header中添加如下代码：

<link rel="stylesheet" href="css/sidebar.css">
<script src="js/sidebar.js"></script>

这里添加了一个CSS文件和一个JavaScript文件。然后，在HTML的body中添加如下代码：

html侧栏悬浮代码

<div class="wrapper">
  <div class="sidebar">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </div>
  <div class="main">
    <p>This is the main content.</p>
  </div>
</div>

这里添加了一个侧栏和一个主内容区块。侧栏中包含了一些链接，主内容区块中展示了一段文字。下面是CSS和JavaScript的内容： CSS代码：

.wrapper {
  display: flex;
}
.sidebar {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f1f1f1;
  overflow-x: hidden;
  padding-top: 20px;
}
.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sidebar li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
.sidebar li a:hover {
  background-color: #555;
  color: white;
}
.main {
  margin-left: 200px;
  padding: 0 20px;
}

JavaScript代码：

window.onscroll = function() {sidebarScroll()};

var sidebar = document.querySelector('.sidebar');

function sidebarScroll() {
  if (window.pageYOffset > 200) {
    sidebar.style.top = "50px";
  } else {
    sidebar.style.top = "0";
  }
}

CSS中定义了wrapper、sidebar、main等样式。其中，sidebar使用了fixed定位，并设置了初始位置为顶部，随着页面向下滚动，侧栏也会跟着向下滑动。 JavaScript中使用了window.onscroll事件监听到页面滚动事件，然后通过document.querySelector()方法获取侧栏元素。在sidebarScroll()方法中，通过判断页面滚动的距离，设置侧栏的top值，实现悬浮效果。最后，保存文件并在浏览器中打开，就能看到HTML侧栏悬浮效果了。

相关推荐