jquery sticky-sidebar实现悬浮粘性侧边栏导航效果代码-html代码-BFW代码库

jquery sticky-sidebar实现悬浮粘性侧边栏导航效果代码

代码语言：html

代码描述：jquery sticky-sidebar实现悬浮粘性侧边栏导航效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>固定侧边栏</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style:none;}
        .header{padding:50px 0;font-size:50px;color:#000;text-align:center;overflow:hidden;background:#ccc;}
        .footer{padding:100px 0;font-size:50px;color:#fff;text-align:center;overflow:hidden;background:#000;}
        .main{position:relative;margin:100px auto;width:1300px;overflow:hidden;}
        .siderBar{float:left;width:25%;}
        .siderBar li{margin-bottom:1px;padding:20px;line-height:50px;font-size:18px;background:#f0f0f0;cursor:pointer;transition:all .5s;}
        .siderBar li.cur{color:#fff;background:#000;}
        .content{float:right;width:70%;}
        .content .item{padding:300px 0;font-size:50px;color:#fff;text-align:center;overflow:hidden;}
    </style>
</head>

<body>
    <header class="header">
        header
    </header>
    <main class="main">
        <div class="siderBar">
            <div class="menu">
                <ul>
                    <li data-href="#s1">栏目一</li>
                    <li data-href="#s2">栏目二</li>
                    <li data-href="#s3">栏目三</li>
                    <li data-href="#s4">栏目四</li>
                    <li data-href="#s5">栏目五</li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div id="s1" class="item" style="background:#999;">一</div>
            <div id="s2" class="item" style="background:#888;">二</div>
            <div id="s3" class="item" style="background:#777;">三</div>
            <div id="s4" class="item" style="background:#666;">四</div>
            <div id="s5" class="item" .........完整代码请登录后点击上方下载按钮下载查看