我一直在为此绞尽脑汁，但似乎无法让它按照我想要的方式行事。本质上，我希望包含 open 和 close 按钮的元素保持固定，即使我已经打开了导航。
现在，点击 #open 后，容器会随着屏幕滚动。我希望它模拟类似于我还没有点击 #open 时的行为（意味着所述容器保持固定位置）。
谢谢大家！下面提供的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-80deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
open.addEventListener("click", () => container.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
答案 0 :(得分：0)
您需要从 (venv) doctoq:Policy-Gradient$ pip list
Package Version
------------------- -------
argon2-cffi 20.1.0
async-generator 1.10
attrs 20.3.0
backcall 0.2.0
bleach 3.2.1
cffi 1.14.4
decorator 4.4.2
defusedxml 0.6.0
entrypoints 0.3
ipykernel 5.4.2
ipython 7.19.0
ipython-genutils 0.2.0
jedi 0.17.2
Jinja2 2.11.2
jsonschema 3.2.0
jupyter-client 6.1.9
jupyter-core 4.7.0
jupyterlab-pygments 0.1.2
MarkupSafe 1.1.1
mistune 0.8.4
nbclient 0.5.1
nbconvert 6.0.7
nbformat 5.0.8
nest-asyncio 1.4.3
notebook 6.1.6
packaging 20.8
pandocfilters 1.4.3
parso 0.7.1
pexpect 4.8.0
pickleshare 0.7.5
pip 20.3.3
prometheus-client 0.9.0
prompt-toolkit 3.0.9
ptyprocess 0.7.0
pycparser 2.20
Pygments 2.7.3
pyparsing 2.4.7
pyrsistent 0.17.3
python-dateutil 2.8.1
pyzmq 20.0.0
Send2Trash 1.5.0
setuptools 51.1.1
six 1.15.0
terminado 0.9.2
testpath 0.4.4
tornado 6.1
traitlets 5.0.5
wcwidth 0.2.5
webencodings 0.5.1
wheel 0.36.1
中取出 circle-container 及其中的所有内容。分离后，您可以将其固定在主体的左上角，并且不会像在 container 内部一样受到相同规则的约束，然后您可以从那里设置样式。
我更改了此代码中的许多内容以使其正常工作，因此请查看并查看我做了什么。
在这里摆弄：https://jsfiddle.net/708Lo31v/
containerconst open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
const cont1 = document.querySelector(".circle-container");
open.addEventListener("click", () => container.classList.add("show-nav"));
open.addEventListener("click", () => cont1.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
close.addEventListener("click", () => cont1.classList.remove("show-nav"));@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
position: relative;
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
z-index: 2;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.circle-container.show-nav .circle {
transform: rotate(-100deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}