猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何在滚动时更改垂直菜单的大小

我想在向下滚动页面时更改（左侧）垂直菜单的大小：页面顶部有一个水平栏，向下滚动时该水平栏消失，我希望左侧垂直菜单转到屏幕顶部，就像在w3schools 的网站上一样。

目前，我所能做的就是将其位置始终设置为屏幕顶部下方 95 像素。我想我需要添加一些javascript，但我根本不知道......

我的网站。

代码：html代码、 css代码、 css代码补充。

编辑：工作答案

html：

      <body>

        <div id="menu">

            <a href="https://lapingenieur.github.io/fr/">accueil</a>

            <a href="https://lapingenieur.github.io/fr/compute/"><b>informatique</b></a>

            <span class="right">

                <a href="https://lapingenieur.github.io/compute/colorscheme.html">english</a>

            </span>

        </div>

        <div id="nav">

            <ul>

                <li><a href="https://lapingenieur.github.io/fr/compute/">L'informatique et moi</a></li>

                <li id="nav-current"><a href="https://lapingenieur.github.io/fr/compute/colorscheme.html">Palette de couleurs</a></li>

            </ul>

        </div>

      </body>

CSS：


#menu {

    clear: both;

    overflow: hidden;

    padding: 6px;

    height: 20px;

    background-color: #c8df00;

}


#menu a, #nav a {

    color: #22232D;

    text-decoration:none;

    padding: 10px 7px;

}


#menu a:hover {

        background-color: #22232D;

        color: #c8df00;

}


#nav {

  height: 100%;

  width: 215px;

  position: fixed;

  overflow-x: hidden;

  overflow-y: auto;

  background-color: #434758;

  text-decoration: none;

  top: 95px;

}


#nav a {

    color: #22232D;

    border-left: 10px solid #22232D;

    display: block;

    padding: 0.8ex 2em 0.8ex 1em;

}


#nav ul, #nav li {

    padding: 0px;

    margin: 0px;

    list-style: none;

}


#nav ul {

    padding-top: 16px;

}


#nav a:hover {

    border-left: 10px solid #875fdf;

    background-color: #22232D;

    color: #875fdf;

}


#nav-current a {

    border-left: 10px solid #c8df00;

    color: #c8df00;

}


至尊宝的传说
浏览 97回答 2
2回答

波斯汪

此代码获取元素的位置nav。滚动页面时，项目滚动直到到达顶部 = 0pxvar nav = document.getElementById('nav');var navTop = nav.offsetTop;window.onscroll = function () { myScrollFunction() };function myScrollFunction() {&nbsp; &nbsp; var res = navTop - document.documentElement.scrollTop;&nbsp; &nbsp; if (res > 0) {&nbsp; &nbsp; &nbsp; &nbsp; nav.setAttribute('style', 'top:' + res + 'px');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; nav.setAttribute('style', 'top:0px')&nbsp; &nbsp; }}例子：<!DOCTYPE html><!-- v0.2.1fr --><html><head>&nbsp; &nbsp; <!-- <link rel="icon" href="../lapin-bang_v3c-nobg.png" sizes="32x32"> -->&nbsp; &nbsp; <!-- TODO: make a 32x32 icon for favicon -->&nbsp; &nbsp; <meta content="charset=UTF-8">&nbsp; &nbsp; <title>Lapingenieur _</title>&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="./index_style.css">&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="./colorscheme_style.css">&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #22232D;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #f1f1f1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: "Overpass";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #content h1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-left: 12px solid #875fdf;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left: 18px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 8px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #content h2 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-left: 12px solid #875fdf;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left: 18px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 8px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .paragraph {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .left {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .right {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: right;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hidden {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #header {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 13px 13px 10px 13px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #434758;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #b79fec;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .header-logo {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .header-name a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #c8df00;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .header-path a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #b79fec;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .header-path {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #menu {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 6px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #c8df00;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #menu a,&nbsp; &nbsp; &nbsp; &nbsp; #nav a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #22232D;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px 7px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #menu a:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #22232D;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #c8df00;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #nav {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 215px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: fixed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow-x: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow-y: auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #434758;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 95px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #nav a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #22232D;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-left: 10px solid #22232D;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0.8ex 2em 0.8ex 1em;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #nav ul,&nbsp; &nbsp; &nbsp; &nbsp; #nav li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #nav ul {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 16px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #nav a:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-left: 10px solid #875fdf;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #22232D;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #875fdf;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #nav-current a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-left: 10px solid #c8df00;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #c8df00;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #content {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 210px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .maintext {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 30px 35px 30px 35px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .no-margin {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* latin-ext */&nbsp; &nbsp; &nbsp; &nbsp; @font-face {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Overpass';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-style: normal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src: url(https://fonts.gstatic.com/s/overpass/v5/qFdH35WCmI96Ajtm81GrU9vyww.woff2) format('woff2');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* latin */&nbsp; &nbsp; &nbsp; &nbsp; @font-face {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Overpass';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-style: normal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src: url(https://fonts.gstatic.com/s/overpass/v5/qFdH35WCmI96Ajtm81GlU9s.woff2) format('woff2');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div id="header">&nbsp; &nbsp; &nbsp; &nbsp; <img class="header-logo" src="https://lapingenieur.github.io/lapin-bang_v3c-nobg.png" height="40px"></img>&nbsp; &nbsp; &nbsp; &nbsp; <span class="header-name"><a href="https://lapingenieur.github.io/fr/">Lapingenieur _</a></span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="header-path">&#11208;&#32;<i><a href="https://lapingenieur.github.io/fr/compute/">informatique</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; / <a href="https://lapingenieur.github.io/fr/compute/colorscheme.html">palette de&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; couleurs</a></i></span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <hr class="hidden">&nbsp; &nbsp; <div id="menu">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://lapingenieur.github.io/fr/">accueil</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://lapingenieur.github.io/fr/compute/"><b>informatique</b></a>&nbsp; &nbsp; &nbsp; &nbsp; <span class="right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://lapingenieur.github.io/compute/colorscheme.html">english</a>&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="nav">&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="https://lapingenieur.github.io/fr/compute/">L'informatique et moi</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li id="nav-current"><a href="https://lapingenieur.github.io/fr/compute/colorscheme.html">Palette de&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; couleurs</a></li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; &nbsp; <hr class="hidden">&nbsp; &nbsp; <div id="content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="maintext">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 class="no-margin">Palette de couleurs</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="no-margin">Couleurs principales</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="paragraph">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/ff3232">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #ff3232"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/ff3232">Red<br>#ff3232</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/FF6633">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #FF6633"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/FF6633">Orange<br>#ff6633</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/ffcf00">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #ffcf00"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/ffcf00">Yellow<br>#ffcf00</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/c8df00">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #c8df00"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/c8df00">Green<br>#c8df00</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/a5dbff">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #a5dbff"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/a5dbff">Cyan<br>#a5dbff</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/51a2db">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #51a2db"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/51a2db">Blue<br>#51a2db</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/875fdf">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #875fdf"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/875fdf">Purple<br>#875fdf</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/b79fec">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #b79fec"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/b79fec">Light purple<br>#b79fec</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/f7bfec">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #f7bfec"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/f7bfec">Light pink<br>#f7bfec</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/f364cb">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #f364cb"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/f364cb">Pink<br>#f364cb</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="no-margin">Nuances de gris</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="paragraph">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/434758">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #434758"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/22232D">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #22232D"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="no-margin">Nuances de gris</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="paragraph">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/434758">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #434758"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/22232D">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #22232D"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="no-margin">Nuances de gris</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="paragraph">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/434758">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #434758"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/22232D">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #22232D"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="no-margin">Nuances de gris</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="paragraph">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/434758">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #434758"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/22232D">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #22232D"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="no-margin">Nuances de gris</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="paragraph">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/434758">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #434758"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.color-hex.com/color/22232D">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="colorpart" style="background-color: #22232D"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; var nav = document.getElementById('nav');&nbsp; &nbsp; &nbsp; &nbsp; var navTop = nav.offsetTop;&nbsp; &nbsp; &nbsp; &nbsp; window.onscroll = function () { myScrollFunction() };&nbsp; &nbsp; &nbsp; &nbsp; function myScrollFunction() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var res = navTop - document.documentElement.scrollTop;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (res > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nav.setAttribute('style', 'top:' + res + 'px');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nav.setAttribute('style', 'top:0px')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></body></html>
0

不负相思意

那么，为了达到预期的结果，请遵循以下规则：1 - 将#nav、.hidden、 和#content包裹在容器中。你应该有这样的东西：<div class="middle_container">&nbsp; &nbsp;<div id="nav">...</div>&nbsp; &nbsp;<hr class="hidden">&nbsp; &nbsp;<div id="content">...</div></div>2 - 将规则设置为display: flex：.middle_container {&nbsp; &nbsp;display: flex;}3 - 对于#nav，将规则设置为position: sticky、top: 0和height: 100vh。它应该看起来像这样：#nav {&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; width: 215px;&nbsp; &nbsp; position: sticky;&nbsp; &nbsp; overflow-x: hidden;&nbsp; &nbsp; overflow-y: auto;&nbsp; &nbsp; background-color: #434758;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; top: 0;}4 -margin-left: 210px从 中删除规则#content。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript