HTML页面滚动时左侧导航栏随着滚动

已于 2022-08-17 09:09:49 修改
阅读量3.1k 收藏 4
点赞数 3
分类专栏： 前端 文章标签： html css javascript
于 2021-11-15 18:05:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/koudandan/article/details/121339619
版权 
<!doctype html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">

    <title>页面滚动</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
</head>

<body>

<style>

    * { margin: 0; padding: 0; }
    body { font: 14px/2 'Microsoft Yahei', Arial; color: #333; background: #fff; }
    img { border: 0px; }
    ul, ol { list-style-type: none; vertical-align: bottom; }
    table { border-collapse: collapse; border-spacing: 0; }
    input, textarea, select { font: 14px/1 'Microsoft Yahei', Arial; color: #333; outline: 0; }
    textarea { resize: none; overflow: auto; }
    h1,h2,h3,h4,h5,h6,font { font-size: 14px; }
    a { /*color: #333;*/ text-decoration: none; cursor: pointer; color: #333;}
    a:hover { color:#2A4194; }
    a img { transition: all .5s ease; }

    .clear { float: none !important; clear: both; +line-height: 0; +font-size: 0; +height: 0; }
    .hidden { display: none; visibility: visible; }
    .wrap { width: 1200px; margin: 0 auto; position: relative; }

    /*************科研服务*/
    .science_research{width:100%;margin: 20px 0 60px 0;}
    .science_research .wrap{display: flex;justify-content: space-between;}
    .science_research .left{width:15%;}
    .science_research .left .title{background: url(../img/science/title_back_1.png) left center no-repeat;width:100%;height: 100px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 24px;font-weight: 500;}
    .science_research .left ul{color:#1C2854;font-size: 20px;}
    .science_research .left ul li{width: 96%;text-align: center;background-color: #F0F2FC;margin-bottom: 2px;padding: 2%;}
    .science_research .left ul li h5{color:#1C2854;font-size: 20px;}
    .science_research .left ul .active{width: 93%;border-left: 5px solid #47AF44;}
    .science_research .right{width:80%;margin-left: 3%;}

</style>


<div class="science_research">

    <div class="wrap">
        <div class="left" id="left_nav">

            <div class="title">科研服务</div>
            <ul>
                <li class="active" id="t1"><h5>标题1</h5></li>
                <li id="t2"><h5>标题2</h5></li>
                <li id="t3"><h5>标题3</h5></li>
                <li id="t4"><h5>标题4</h5></li>
                <li id="t5"><h5>标题5</h5></li>
            </ul>

        </div>
        <div></div>

        <div class="right">

            <div id="c1">

                <h3>标题1</h3>
                内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>

            <div id="c2">
                <h3>标题2</h3>
                内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内

            </div>


            <div id="c3">
                <h3>标题3</h3>

                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内
            </div>


            <div id="c4">
                <h3>标题4</h3>

                内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内

            </div>


            <div id="c5">
                <h3>标题5</h3>

                容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容  内容内容内容内容内容内容内容内容内容内容内容内容内容内

            </div>


        </div>
        <!--</div>-->
    </div>

</div>


<script src="jquery.min.js"></script>
<script>

    //各个块的top值
    var c1_top = $("#c1").offset().top;
    var c2_top = $("#c2").offset().top;
    var c3_top = $("#c3").offset().top;
    var c4_top = $("#c4").offset().top;
    var c5_top = $("#c5").offset().top;
</script>

<!--滚动浮动效果-->
<script>

    $(window).scroll(function () {
        var scroll_top = ScollPostion();
        var scroll_top = scroll_top.top;

        console.log(scroll_top);

        if (c1_top <= scroll_top && scroll_top < c2_top) {
            $("#left_nav").css({'margin-top': Number(scroll_top) + 'px'});
            $("#t1").siblings("li").removeClass("active");
            $("#t1").addClass('active');
        }
        else if (c2_top <= scroll_top && scroll_top < c3_top) {
            $("#left_nav").css({'margin-top': Number(scroll_top) + 'px'});
            $("#t2").siblings("li").removeClass("active");
            $("#t2").addClass('active');
        }
        else if (c3_top <= scroll_top && scroll_top < c4_top) {
            $("#left_nav").css({'margin-top': Number(scroll_top) + 'px'});
            $("#t3").siblings("li").removeClass("active");
            $("#t3").addClass('active');
        }
        else if (c4_top <= scroll_top && scroll_top < c5_top) {
            $("#left_nav").css({'margin-top': Number(scroll_top) + 'px'});
            $("#t4").siblings("li").removeClass("active");
            $("#t4").addClass('active');
        }
        else if (c5_top <= scroll_top) {
            $("#left_nav").css({'margin-top': Number(c5_top)+ 'px'});
            $("#t5").siblings("li").removeClass("active");
            $("#t5").addClass('active');
        } else {
            $("#left_nav").css({'margin-top': '0px'});
        }

    });

    function ScollPostion() { //滚动条位置
        var t, l, w, h;
        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight;
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
        }
        return {
            top: t,
            left: l,
            width: w,
            height: h
        };
    }

</script>



</body>
</html>

koudandan
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
html侧边导航栏跟随页面滚动,javascript练习：导航随内容滚动而跟随变化
weixin_32223625的博客
06-04 1409
window.onload=function(){nav();};//nav导航function nav(){var arr = [pos($('div1')).top,pos($('div2')).top,pos($('div3')).top,pos($('div4')).top,pos($('div5')).top,pos($('div6')).top,pos($('div7')).top,p...
html纵向滚动导航栏,html+css+js实现导航栏滚动渐变效果
weixin_33343681的博客
05-31 1186
先看效果：实现：1.定义导航栏的文字标签： 北极光。主页个人简介文章留言版友链2.导航栏整体的样式：.tou{position: fixed;top: 0;left: 0;padding: 25px 100px;width: 100%;display: flex;justify-content: space-between;align-items: center;transition: 0.5s...
html导航栏怎么做选中,页面滚动选中左侧导航栏之HelloWorld
weixin_42101720的博客
06-09 793
mScroll方法用于左侧导航点击使用；ligroup为左侧的导航栏group为右侧内容的divfunction mScroll(vid){$("html,body").animate({scrollTop: $("#"+vid).offset().top}, 600);}$(window).scroll(function(){//滚动到标杆位置,左侧导航加active$('.group').ea...
悬浮左侧导航栏html,jQuery页面滚动左侧悬浮固定导航菜单代码
weixin_35825868的博客
05-30 881
js代码$(function(){//设置标杆var _line=parseInt($(window).height()/3);$(window).scroll(function(){//滚动730px，左侧导航固定定位if ($(window).scrollTop()>730) {$('.fl_l').css({'position':'fixed','top':10})}else{$('....
html导航页面滚动,可通过导航视图精确滚动页面内容的js插件
weixin_36232899的博客
06-04 200
viewport.js是一款非常有用的js插件，它可以通过设置导航视图来精确的对页面中每个章节的内容进行导航。同时你在滚动页面的时候还可以看到当前阅读的章节处于什么状态。viewport.js可以用于检测当前的滚动状态。安装可以通过bower来安装该插件。$ bower install vanilla-viewport使用方法使用该插件首先要引入viewport.js文件。HTML结构为每一个章节...
导航栏滚动渐变效果 html+css+js
热门推荐
你好呀，很高兴你在看这里~
12-24 2万+
先看效果： 实现： 1.定义导航栏的文字标签： <div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li><a href="#"><a href="#">主页</a></li> <li><a href="#">个人简介</
html左侧导航滑动网页定位效果源码,Javascript实现页面滚动时导航智能定位
weixin_28890941的博客
06-03 1023
常见的开发页面中可能会有这么一个需求，页面中会有多个模块，每个模块对应一个导航，当页面滚动到某个模块时，对应的模块导航需要加上一个类用于区分当前用户所浏览区域。假设结构如下：section1section2section3section4section5section1section2section3section4section5页面滚动时导航定位js代码如下：var $navs = $('na...
html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
weixin_30513765的博客
06-04 3160
最近一直在弄页面的事情，对页面方面的知识又巩固了一下。这次的内容如题，大家对代码有疑问或者是有更好的方法欢迎留言！js部分//标题对象var title = document.getElementById("title");//菜单对象var menu = document.getElementById("menu");//正文对象var content = document.getElement...
html导航滚动置顶,jQuery置顶导航菜单 随浏览器滚动条浮动定位菜单
weixin_34494211的博客
06-01 638
今天带大家来实现一个大家经常在网站上看到的导航效果，置顶导航菜单,并随滚动条浮动定位菜单,固定菜单到顶部，就像码云笔记导航菜单效果一样，大家可以滚动试一下。之前我写过一篇类似文章，只不过是菜单没有根据滚动条判断，大家可以看一下《jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动》，今天效果实现思路很简单，获取要定位元素距离浏览器顶部的距离，滚动条的滑动距离大于等于定位元素距离浏览器顶部的...
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
10-14
当 `scrollBox` 滚动时，事件监听器会找出当前可视区域中最接近的锚点，并更新 `activeMenu` 的值，使得导航栏的选中状态与滚动位置保持一致。 总的来说，Vue 中实现导航锚点的平滑滚动和导航栏对应变化，主要是...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
解决Vue页面固定滚动位置的处理办法
08-30
浏览器的滚动位置恢复行为可以分为两个步骤：在hashchange事件触发时，浏览器会拿到当前页面的document.body.scrollTop值，并与自己存储的滚动条位置进行比较，取最小的值，设置成当前的document.body.scrollTop值。...
左侧导航菜单滚动
06-04
这个功能通常出现在具有垂直导航栏的网站上，当页面内容较多，用户滚动页面时，左侧的导航菜单会随之固定在屏幕的一侧，以便用户在浏览页面下部内容时仍能方便地访问导航链接。 描述中提到的“左侧导航菜单滚动”是...
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
当用户点击后面菜单项时，由于页面刷新，导航栏可能滚动到最左边，显示第一个菜单项。为了避免这种情况，可以使用JavaScript来定位当前选中的菜单项： ```javascript var count = 0; $(".header table td").each...
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1128
iframe 预览邮件 + 打印邮件 + 模拟滚动条
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1020
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 682
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
前端开发知识(一)-html
modi000的博客
07-24 588
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
html左侧导航栏不随页面滚动
07-27
要实现左侧导航栏不随页面滚动，你可以使用 CSS 的 position 属性来控制导航栏的定位。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> /* 设置导航栏的样式 */ .navigation { position: fixed; left: 0; top: 50%; transform: translateY(-50%); background-color: #f1f1f1; width: 200px; height: 100vh; /* 设置导航栏高度和视口高度一致，使其充满整个视口 */ } /* 设置内容区域的样式 */ .content { margin-left: 200px; /* 将内容区域的左边距设置为导航栏的宽度，以防止内容被导航栏遮挡 */ } </style> </head> <body> <div class="navigation"> <!-- 导航栏内容 --> </div> <div class="content"> <!-- 页面内容 --> </div> </body> </html> ``` 在上面的示例中，我们使用了 `position: fixed;` 来将导航栏固定在页面的左侧。然后通过设置 `top: 50%;` 和 `transform: translateY(-50%);` 将导航栏垂直居中对齐。通过设置 `width: 200px;` 和 `height: 100vh;` 来定义导航栏的宽度和高度，使其充满整个视口。 最后，在内容区域中使用 `margin-left: 200px;` 来给内容区域留出导航栏的宽度，以防止内容被导航栏遮挡。 这样就可以实现左侧导航栏不随页面滚动的效果了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值