HTML5动态粘性侧边栏
以下是一个HTML5动态粘性侧边栏组件的示例代码：
<!DOCTYPE html>
<html>
<head><title>HTML5动态粘性侧边栏</title><style>body {margin: 0;padding: 0;background-color: #f0f0f0;font-family: Arial, sans-serif;}.container {display: flex;flex-direction: row;flex-wrap: nowrap;height: 100vh;overflow: hidden;}.sidebar {flex: 0 0 250px;background-color: #333;color: #fff;padding: 20px;box-sizing: border-box;position: relative;}.sidebar h2 {margin-top: 0;margin-bottom: 20px;font-size: 24px;text-align: center;}.sidebar ul {list-style: none;padding: 0;margin: 0;}.sidebar li {margin-bottom: 10px;text-align: center;}.main {flex: 1;background-color: #fff;padding: 20px;box-sizing: border-box;position: relative;overflow-y: scroll;}.sticky {position: sticky;top: 0;}</style>
</head>
<body><div class="container"><div class="sidebar"><h2>Sidebar</h2><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li><li>Link 4</li><li>Link 5</li><li>Link 6</li><li>Link 7</li><li>Link 8</li><li>Link 9</li><li>Link 10</li></ul></div><div class="main"><h1>HTML5高性能动态粘性侧边栏组件</h1><p>这是一个使用HTML5和CSS3实现的高性能动态粘性侧边栏组件。当用户滚动页面时，侧边栏会保持在屏幕顶部，直到用户滚动到底部。</p><p>该组件使用了Flexbox布局和CSS3的sticky属性来实现。同时，使用JavaScript监听滚动事件，判断侧边栏是否应该粘性定位。</p><p>该组件可以用于各种网站和应用程序的侧边栏导航，提供更好的用户体验。</p><p>请随意使用和修改该组件，以适应您的需要。</p><p>作者：小激动. Caim</p></div></div><script>var sidebar = document.querySelector('.sidebar');var main = document.querySelector('.main');var stickyTop = sidebar.offsetTop;var stickyHeight = sidebar.offsetHeight;window.addEventListener('scroll', function() {if(window.pageYOffset >= stickyTop) {sidebar.classList.add('sticky');main.style.paddingLeft = sidebar.offsetWidth + 'px';} else {sidebar.classList.remove('sticky');main.style.paddingLeft = 0;}if(window.pageYOffset + window.innerHeight >= document.body.offsetHeight) {sidebar.style.top = document.body.offsetHeight - stickyHeight - stickyTop + 'px';} else {sidebar.style.top = '20px';}});</script>
</body>
</html>
该示例使用了HTML5和CSS3的Flexbox布局和sticky属性来创建一个高性能动态粘性侧边栏组件。CSS样式用于设置页面的背景颜色，字体样式和容器的高度和宽度。JavaScript代码通过监听滚动事件，判断侧边栏是否应该粘性定位，并且设置侧边栏的位置和样式。其中，stickyTop和stickyHeight变量用于记录侧边栏的顶部位置和高度，当用户滚动页面时，如果滚动距离大于等于stickyTop，就将侧边栏设置为sticky定位，并且设置主内容区域的padding-left为侧边栏的宽度，以便内容不会被侧边栏遮挡。当用户滚动到页面底部时，将侧边栏设置为底部粘性定位。
HTML5动态粘性（左）侧边栏示例
