位置固定但随屏幕滚动

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 及其中的所有内容。一旦它是分开的，你可以将它固定在 body 的左上角，并且不会像在 container 里面一样受到相同规则的约束然后你可以从那里设置它的样式.

为了使其正常工作，我在此代码中做了很多更改，因此请查看并查看我做了什么。

Fiddle 这里：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>

位置固定但随屏幕滚动

Position fixed but scrolls with the screen

css

position

fixed