激活变换后，图像将变为导航栏前方电话故事

问题描述 投票：0回答：1

我写了这段代码：

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Phone Tales</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zain:wght@200;300;400;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="icon" href="Images/Icon.png">
</head>

<body>
    <nav>
        <div class="leftdiv navdiv">
            <h0point5 class="lalezar-regular" onclick="location.href='Index.html'">
                Phone Tales
            </h0point5>
        </div>
        <div class="rightdiv navdiv">
            <a href="Ar/Index.html" class="Regular">العربية</a>
        </div>
    </nav>
    <section class="s1 flex">
        <div class="flex">
            <div class="leftdiv">
                <img src="Images/Image1.png" style="height: 400px !important; border-radius: 20px;">
            </div>
            <hr id="s1-vertical">
            <div class="rightdiv">
                <h0point5 class="lalezar-regular">
                    Mobile phones are the essence of life.
                </h0point5>
                <p style="width: 400px; font-size: 20px;">
                    We cannot deny that mobile phones have become an integral part of our daily lives. They connect us
                    to the world, provide us with tools to organize our personal and professional lives, and offer us
                    information and entertainment anytime, anywhere. Do you think our increasing reliance on mobile
                    phones affects the quality of our lives? 🤔
                </p>
            </div>
        </div>
    </section>
    <section class="s2 flex">
        <div class="flex" id="s2-container">
            <div class="leftdiv">
                <img src="Images/Image3.png" style="height: 600px !important; border-radius: 20px;">
            </div>
            <hr id="s2-vertical">
            <div class="rightdiv">
                <h0point5 class="lalezar-regular">
                    The history of the phone.
                </h0point5>
                <p style="width: 400px; font-size: 20px;">
                    Imagine that in <span class="lalezar-regular">1876</span>, Alexander Graham Bell invented a simple
                    telephone that could transmit sound over wires. This invention changed the world, and communication
                    was no longer limited to written letters or personal meetings. Over the years, the telephone
                    evolved, transitioning from a heavy, stationary device to a large mobile phone in the 1980s. Then
                    came smartphones, which pack incredible computing power.
                    <br>
                    Now, the smartphone is not just a tool for voice communication; it is also a hub for personal
                    management, entertainment, and social interaction. It allows us to keep up with our work, shop,
                    learn new skills, and even monitor our health.
                    <br>
                    But, despite all these benefits, the question remains: Have phones made us more connected or more
                    isolated? Have these small devices become a blessing that enhances our lives, or a curse that
                    distances us from reality?
                </p>
            </div>
        </div>
    </section>
    <section class="s3">
        <h0point5 class="lalezar-regular">The Phones</h0point5>
        <div id="PhonesContainer"></div>
    </section>

    <script src="script.js"></script>
</body>

</html>

CSS：

* {
    transition: all 0.5s !important;
    font-family: "Zain", sans-serif;
    font-weight: 400;
    font-style: normal;
}

a:hover, button:hover {
    transition: none !important;
    background-color: rgba(128, 128, 128, 0.5) !important;
}

body {
    margin: 0;
    padding: 0;
}

nav {
    height: 50px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.5);
    position: fixed;
    width: 98vw;
}

a {
    padding: 10px;
    border-radius: 10px;
}

.lalezar-regular {
    font-family: "Lalezar", system-ui !important;
    font-weight: 400;
    font-style: normal;
}

.Regular {
    text-decoration: none;
    color: currentColor;
}

nav .Regular {
    margin-left: 10px;
    margin-right: 10px;
}

.leftdiv {
    float: left;
}

.rightdiv {
    float: right;
}

h0point5 {
    font-size: 2em;
}

nav h0point5 {
    cursor: pointer;
    position: relative;
    top: 5px;
}

.flex {
    display: flex;
}

section {
    padding-left: 10px;
    height: 100vh !important;
    align-content: center;
}

.s1 {
    align-items: center;
    justify-content: center;
}

#s1-vertical {
    background-color: black;
    border-radius: 5px;
    border: none;
    height: 400px;
    width: 5px;
    margin-left: 10px !important;
    margin-right: 10px !important;
}
.s2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Images/Image2.png');
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: white;
}

#s2-vertical {
    background-color: white;
    border-radius: 5px;
    border: none;
    height: 600px;
    width: 5px;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.s3 {
    justify-content: center;
    text-align: center;
}

.s3 h0point5 {
    font-size: 60px;
}

#PhonesContainer {
    display: flex;
    height: 0;
    width: /*80%*/ 0;
    border-radius: 20px;
    border: 2px black solid;
    margin: auto;
    overflow-x: scroll;
    overflow-y: hidden;
}
#PhonesContainer::-webkit-scrollbar {
    display: none;
}

JavaScript：

window.addEventListener("scroll", function() {
    if (this.scrollY > 1200) {
        this.document.getElementById("PhonesContainer").style.width = "80%";
        this.document.getElementById("PhonesContainer").style.height = "400px";
        this.document.getElementById("PhonesContainer").style.borderColor = "black";
    } else {
        this.document.getElementById("PhonesContainer").style.width = "0";
        this.document.getElementById("PhonesContainer").style.height = "0";
        this.document.getElementById("PhonesContainer").style.borderColor = "transparent";
    }

    if (this.scrollY > 715) {
        this.document.getElementById("s2-container").style.transform = "scale(1)";
    } else {
        this.document.getElementById("s2-container").style.transform = "scale(0)";
    }
});

但是当我运行代码并滚动到 715 时：

The Problem

图像变为导航栏上方！

当我滚动时出现容器时，网站变为导航上方，并且我希望它超出导航，当我将鼠标悬停在按钮上方时，我制作的另一个网站也出现同样的问题：

Another Website

按钮的一部分出现在导航栏上方，因为我更改了 

transform: scale(1.5)
当我悬停时。

这个问题有解决办法吗？

javascript html css
1个回答
0
投票

一旦添加了

transform
，就会创建一个新的堆叠上下文，新的将位于旧的每个元素之上。

在这种情况下，您可以将 

nav
移动到其他 
transform
元素的末尾，并在 
transform
中添加 
nav
。

window.addEventListener("scroll", function() {
  if (this.scrollY > 1200) {
    this.document.getElementById("PhonesContainer").style.width = "80%";
    this.document.getElementById("PhonesContainer").style.height = "400px";
    this.document.getElementById("PhonesContainer").style.borderColor = "black";
  } else {
    this.document.getElementById("PhonesContainer").style.width = "0";
    this.document.getElementById("PhonesContainer").style.height = "0";
    this.document.getElementById("PhonesContainer").style.borderColor = "transparent";
  }

  if (this.scrollY > 715) {
    this.document.getElementById("s2-container").style.transform = "scale(1)";
  } else {
    this.document.getElementById("s2-container").style.transform = "scale(0)";
  }
});
* {
  transition: all 0.5s !important;
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a:hover,
button:hover {
  transition: none !important;
  background-color: rgba(128, 128, 128, 0.5) !important;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  transform: scale(1);
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.5);
  position: fixed;
  top: 0;
  width: 98vw;
}

a {
  padding: 10px;
  border-radius: 10px;
}

.lalezar-regular {
  font-family: "Lalezar", system-ui !important;
  font-weight: 400;
  font-style: normal;
}

.Regular {
  text-decoration: none;
  color: currentColor;
}

nav .Regular {
  margin-left: 10px;
  margin-right: 10px;
}

.leftdiv {
  float: left;
}

.rightdiv {
  float: right;
}

h0point5 {
  font-size: 2em;
}

nav h0point5 {
  cursor: pointer;
  position: relative;
  top: 5px;
}

.flex {
  display: flex;
}

section {
  padding-left: 10px;
  height: 100vh !important;
  align-content: center;
}

.s1 {
  align-items: center;
  justify-content: center;
}

#s1-vertical {
  background-color: black;
  border-radius: 5px;
  border: none;
  height: 400px;
  width: 5px;
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.s2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://placehold.co/600x400");
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: white;
}

#s2-vertical {
  background-color: white;
  border-radius: 5px;
  border: none;
  height: 600px;
  width: 5px;
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.s3 {
  justify-content: center;
  text-align: center;
}

.s3 h0point5 {
  font-size: 60px;
}

#PhonesContainer {
  display: flex;
  height: 0;
  width: /*80%*/
  0;
  border-radius: 20px;
  border: 2px black solid;
  margin: auto;
  overflow-x: scroll;
  overflow-y: hidden;
}

#PhonesContainer::-webkit-scrollbar {
  display: none;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zain:wght@200;300;400;700;800;900&display=swap" rel="stylesheet">
<section class="s1 flex">
  <div class="flex">
    <div class="leftdiv">
      <img src="https://placehold.co/600x400" style="height: 400px !important; border-radius: 20px;">
    </div>
    <hr id="s1-vertical">
    <div class="rightdiv">
      <h0point5 class="lalezar-regular">
        Mobile phones are the essence of life.
      </h0point5>
      <p style="width: 400px; font-size: 20px;">
        We cannot deny that mobile phones have become an integral part of our daily lives. They connect us to the world, provide us with tools to organize our personal and professional lives, and offer us information and entertainment anytime, anywhere. Do you
        think our increasing reliance on mobile phones affects the quality of our lives? 🤔
      </p>
    </div>
  </div>
</section>
<section class="s2 flex">
  <div class="flex" id="s2-container">
    <div class="leftdiv">
      <img src="https://placehold.co/600x400" style="height: 600px !important; border-radius: 20px;">
    </div>
    <hr id="s2-vertical">
    <div class="rightdiv">
      <h0point5 class="lalezar-regular">
        The history of the phone.
      </h0point5>
      <p style="width: 400px; font-size: 20px;">
        Imagine that in <span class="lalezar-regular">1876</span>, Alexander Graham Bell invented a simple telephone that could transmit sound over wires. This invention changed the world, and communication was no longer limited to written letters or
        personal meetings. Over the years, the telephone evolved, transitioning from a heavy, stationary device to a large mobile phone in the 1980s. Then came smartphones, which pack incredible computing power.
        <br> Now, the smartphone is not just a tool for voice communication; it is also a hub for personal management, entertainment, and social interaction. It allows us to keep up with our work, shop, learn new skills, and even monitor our health.
        <br> But, despite all these benefits, the question remains: Have phones made us more connected or more isolated? Have these small devices become a blessing that enhances our lives, or a curse that distances us from reality?
      </p>
    </div>
  </div>
</section>
<section class="s3">
  <h0point5 class="lalezar-regular">The Phones</h0point5>
  <div id="PhonesContainer"></div>
</section>
<nav>
  <div class="leftdiv navdiv">
    <h0point5 class="lalezar-regular" onclick="location.href='Index.html'">
      Phone Tales
    </h0point5>
  </div>
  <div class="rightdiv navdiv">
    <a href="Ar/Index.html" class="Regular">العربية</a>
  </div>
</nav>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.