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>Sidebarh2>
            <ul>
                <li>Link 1li>
                <li>Link 2li>
                <li>Link 3li>
                <li>Link 4li>
                <li>Link 5li>
                <li>Link 6li>
                <li>Link 7li>
                <li>Link 8li>
                <li>Link 9li>
                <li>Link 10li>
            ul>
        div>
        <div class="main">
            <h1>HTML5高性能动态粘性侧边栏组件h1>
            <p>这是一个使用HTML5和CSS3实现的高性能动态粘性侧边栏组件。当用户滚动页面时,侧边栏会保持在屏幕顶部,直到用户滚动到底部。p>
            <p>该组件使用了Flexbox布局和CSS3的sticky属性来实现。同时,使用JavaScript监听滚动事件,判断侧边栏是否应该粘性定位。p>
            <p>该组件可以用于各种网站和应用程序的侧边栏导航,提供更好的用户体验。p>
            <p>请随意使用和修改该组件,以适应您的需要。p>
            <p>作者:小激动. Caimp>
        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动态粘性(左)侧边栏示例

HTML5动态粘性侧边栏_第1张图片

你可能感兴趣的:(html5,javascript,css)