位置固定，但随屏幕滚动

Question

我在这件事上绞尽脑汁，但我似乎无法让它按照我想要的方式运行。本质上，我希望包含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"));

Answer 1

您需要从container中取出circle-container和其中的所有内容。一旦它是独立的，你可以将它定位到主体的左上角，并且不会受到相同规则的约束，就像它是在container中一样，然后你可以从那里对它进行样式设置。

我在这段代码中修改了相当多的东西，让它正常工作，所以请仔细检查一下，看看我做了什么。

小提琴在这里：https://jsfiddle.net/708Lo31v/

​

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

<!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="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="container">
            
            <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>

​