首页猿问如何在滚动时更改垂直菜单的大小

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

JavaScript

至尊宝的传说 2023-09-14 21:57:51

我想在向下滚动页面时更改（左侧）垂直菜单的大小：页面顶部有一个水平栏，向下滚动时该水平栏消失，我希望左侧垂直菜单转到屏幕顶部，就像在w3schools 的网站上一样。目前，我所能做的就是将其位置始终设置为屏幕顶部下方 95 像素。我想我需要添加一些javascript，但我根本不知道......我的网站。代码：html代码、 css代码、 css代码补充。编辑：工作答案与CSS使用JavaScripthtml： <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;}

查看完整描述

2 回答

波斯汪

TA贡献1811条经验获得超4个赞

此代码获取元素的位置nav。滚动页面时，项目滚动直到到达顶部 = 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>

<html>

<head>

<title>Lapingenieur _</title>

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

<span class="header-name"><a href="https://lapingenieur.github.io/fr/">Lapingenieur _</a></span>

<span class="header-path">⯈ <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>

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

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

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

</span>

</div>

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

<h1 class="no-margin">Palette de couleurs</h1>

<h2 class="no-margin">Couleurs principales</h2>

</a>

</div>

</a>

<a class="colortext" href="https://www.color-hex.com/color/FF6633">Orange<br>#ff6633</a>

</div>

</a>

<a class="colortext" href="https://www.color-hex.com/color/ffcf00">Yellow<br>#ffcf00</a>

</div>

</a>

<a class="colortext" href="https://www.color-hex.com/color/c8df00">Green<br>#c8df00</a>

</div>

</a>

</div>

</a>

</div>

</a>

<a class="colortext" href="https://www.color-hex.com/color/875fdf">Purple<br>#875fdf</a>

</div>

</a>

<a class="colortext" href="https://www.color-hex.com/color/b79fec">Light purple<br>#b79fec</a>

</div>

</a>

<a class="colortext" href="https://www.color-hex.com/color/f7bfec">Light pink<br>#f7bfec</a>

</div>

</a>

</div>

<h2 class="no-margin">Nuances de gris</h2>

</a>