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

【问题标题】：How to change vertical menu's size while scrolling如何在滚动时更改垂直菜单的大小
【发布时间】：2020-11-29 13:04:57
【问题描述】：

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

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

我的site。

编辑：工作答案

与css
与javascript

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;
}

【问题讨论】：

请改用邮政编码
尝试使用媒体查询

标签： javascript html css

【解决方案1】：

此代码采用元素nav 的位置。滚动页面时，item一直滚动到top = 0px

var nav = document.getElementById('nav');
var navTop = nav.offsetTop;

window.onscroll = function () { myScrollFunction() };

function myScrollFunction() {
    var res = navTop - document.documentElement.scrollTop;
    if (res > 0) {
        nav.setAttribute('style', 'top:' + res + 'px');
    } else {
        nav.setAttribute('style', 'top:0px')
    }
}

示例：

<!DOCTYPE html>
<!-- v0.2.1fr -->
<html>
<head>
    <!-- <link rel="icon" href="../lapin-bang_v3c-nobg.png" sizes="32x32"> -->
    <!-- TODO: make a 32x32 icon for favicon -->
    <meta content="charset=UTF-8">
    <title>Lapingenieur _</title>
    <link rel="stylesheet" type="text/css" href="./index_style.css">
    <link rel="stylesheet" type="text/css" href="./colorscheme_style.css">

    <style>
        body {
            color: #22232D;
            background-color: #f1f1f1;
            font-family: "Overpass";
            text-decoration: none;
            margin: 0px;
        }

        #content h1 {
            margin-top: 10px;
            margin-bottom: 10px;
            border-left: 12px solid #875fdf;
            padding-left: 18px;
            padding-top: 8px;
        }

        #content h2 {
            margin-top: 10px;
            margin-bottom: 10px;
            border-left: 12px solid #875fdf;
            padding-left: 18px;
            padding-top: 8px;
        }

        .paragraph {
            margin-top: 20px;
        }

        .left {
            float: left;
            margin: 0;
            padding: 0;
        }

        .right {
            float: right;
            margin: 0;
            padding: 0;
        }

        .hidden {
            display: none;
        }

        #header {
            padding: 13px 13px 10px 13px;
            background-color: #434758;
            font-size: 30px;
            color: #b79fec;
        }

        .header-logo {
            vertical-align: middle;
        }

        .header-name a {
            margin-left: 10px;
            text-decoration: none;
            color: #c8df00;
        }

        .header-path a {
            font-size: 20px;
            color: #b79fec;
            text-decoration: none;
        }

        .header-path {
            margin-left: 5px;
            font-size: 20px;
        }

        #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;
        }

        #content {
            margin-left: 210px;
        }

        .maintext {
            margin: 30px 35px 30px 35px;
        }

        .no-margin {
            margin: 0px;
        }

        /* latin-ext */
        @font-face {
            font-family: 'Overpass';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/overpass/v5/qFdH35WCmI96Ajtm81GrU9vyww.woff2) format('woff2');
            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;
        }

        /* latin */
        @font-face {
            font-family: 'Overpass';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/overpass/v5/qFdH35WCmI96Ajtm81GlU9s.woff2) format('woff2');
            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;
        }
    </style>

</head>
<body>
    <div id="header">
        <img class="header-logo" src="https://lapingenieur.github.io/lapin-bang_v3c-nobg.png" height="40px"></img>
        <span class="header-name"><a href="https://lapingenieur.github.io/fr/">Lapingenieur _</a></span>
        <span class="header-path">&#11208;&#32;<i><a href="https://lapingenieur.github.io/fr/compute/">informatique</a>
                / <a href="https://lapingenieur.github.io/fr/compute/colorscheme.html">palette de
                    couleurs</a></i></span>
    </div>
    <hr class="hidden">
    <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>
    <hr class="hidden">
    <div id="content">
        <div class="maintext">
            <h1 class="no-margin">Palette de couleurs</h1>
            <h2 class="no-margin">Couleurs principales</h2>
            <div class="paragraph">
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/ff3232">
                        <div class="colorpart" style="background-color: #ff3232"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/ff3232">Red<br>#ff3232</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/FF6633">
                        <div class="colorpart" style="background-color: #FF6633"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/FF6633">Orange<br>#ff6633</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/ffcf00">
                        <div class="colorpart" style="background-color: #ffcf00"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/ffcf00">Yellow<br>#ffcf00</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/c8df00">
                        <div class="colorpart" style="background-color: #c8df00"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/c8df00">Green<br>#c8df00</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/a5dbff">
                        <div class="colorpart" style="background-color: #a5dbff"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/a5dbff">Cyan<br>#a5dbff</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/51a2db">
                        <div class="colorpart" style="background-color: #51a2db"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/51a2db">Blue<br>#51a2db</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/875fdf">
                        <div class="colorpart" style="background-color: #875fdf"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/875fdf">Purple<br>#875fdf</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/b79fec">
                        <div class="colorpart" style="background-color: #b79fec"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/b79fec">Light purple<br>#b79fec</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/f7bfec">
                        <div class="colorpart" style="background-color: #f7bfec"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/f7bfec">Light pink<br>#f7bfec</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/f364cb">
                        <div class="colorpart" style="background-color: #f364cb"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/f364cb">Pink<br>#f364cb</a>
                </div>
            </div>
            <h2 class="no-margin">Nuances de gris</h2>
            <div class="paragraph">
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/434758">
                        <div class="colorpart" style="background-color: #434758"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/22232D">
                        <div class="colorpart" style="background-color: #22232D"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>
                </div>
            </div>
            <h2 class="no-margin">Nuances de gris</h2>
            <div class="paragraph">
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/434758">
                        <div class="colorpart" style="background-color: #434758"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/22232D">
                        <div class="colorpart" style="background-color: #22232D"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>
                </div>
            </div>
            <h2 class="no-margin">Nuances de gris</h2>
            <div class="paragraph">
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/434758">
                        <div class="colorpart" style="background-color: #434758"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/22232D">
                        <div class="colorpart" style="background-color: #22232D"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>
                </div>
            </div>
            <h2 class="no-margin">Nuances de gris</h2>
            <div class="paragraph">
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/434758">
                        <div class="colorpart" style="background-color: #434758"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/22232D">
                        <div class="colorpart" style="background-color: #22232D"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>
                </div>
            </div>
            <h2 class="no-margin">Nuances de gris</h2>
            <div class="paragraph">
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/434758">
                        <div class="colorpart" style="background-color: #434758"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/434758">Light Grey<br>#434758</a>
                </div>
                <div class="colorbox">
                    <a href="https://www.color-hex.com/color/22232D">
                        <div class="colorpart" style="background-color: #22232D"> </div>
                    </a>
                    <a class="colortext" href="https://www.color-hex.com/color/22232D">Dark Grey<br>#22232D</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        var nav = document.getElementById('nav');
        var navTop = nav.offsetTop;

        window.onscroll = function () { myScrollFunction() };

        function myScrollFunction() {
            var res = navTop - document.documentElement.scrollTop;
            if (res > 0) {
                nav.setAttribute('style', 'top:' + res + 'px');
            } else {
                nav.setAttribute('style', 'top:0px')
            }
        }
    </script>


</body>
</html>

【讨论】：

【解决方案2】：

好吧，为了达到预期的效果，请遵循以下规则：

1 - 将 #nav、.hidden 和 #content 包装在一个容器中。你应该有这样的东西：

<div class="middle_container">
   <div id="nav">...</div>
   <hr class="hidden">
   <div id="content">...</div>
</div>

2 - 将规则设置为display: flex:

.middle_container {
   display: flex;
}

3 - 对于#nav，将规则设置为position: sticky、top: 0 和height: 100vh。它应该是这样的：

#nav {
    height: 100vh;
    width: 215px;
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #434758;
    text-decoration: none;
    top: 0;
}

4 - 从#content 中删除规则margin-left: 210px。

【讨论】：

我只有一个问题：如果屏幕变薄，nav 菜单也会变小。