文本位置垂直固定，但不是水平固定-有解無憂

在我網站的左側，我有一個推拉門。當你打開我的網站時，門是關著的，但它向右伸出一點，所以你可以看到門在那里。它有一個標題“CV.CONTACT”。在這里你可以看到一張圖片：

文本位置垂直固定，但不是水平固定

現在這個標題的位置是絕對的。當你點擊門時，門會滑動打開，標題也會隨之移動。但問題是當你在打開的門內滾動時，標題也會滾動。我希望標題固定在中間。但是當然，當您再次關閉門時，標題應該再次向左移動。

我找到了這個小提琴，這就是它應該如何作業，但不幸的是它對我不起作用：[http://jsfiddle.net/7pmrrtsc/4/][2]

在水平方向上，標題可以左右移動很重要。但垂直它應該是固定的。

這是我的代碼：

$("#left-door").click(function(){
  if ( $(this).hasClass("isOpen") ) {
    $(this).animate({
      left: '-300px'
    });
  } else {
    $(this).animate({
      left: '0'
    });
  }
  $(this).toggleClass("isOpen");
});

*,
*:before,
*:after {
  margin: 0;
  box-sizing: border-box;
}

body,html {
    height: 100%;
}


.container {
  position: relative;

  background-color: grey;

  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
  padding: 50px;
}

.sliding-panel {
  position: fixed;
  color: white;
  width: 60px;
  height: 100%;
  z-index: 2;
}

#left-door {
  font-family: helvetica;
  background-color: white;
  border-right: 1px solid black;
  top:0;
  left:-300px;
  width: 350px;
  overflow: auto;
}

p1{
  font-family: helvetica;
  font-size: 20px;
  color: black;
  transform: rotate(-90deg);
  text-align: right;
  position: absolute;
top: 45%;
right:-40px;
}

#left-door p2{
  color: black;
  margin-left: 40px;
  text-align: left;
  position:absolute;
top: 10px;
left: -20px;
width: 273px;
line-height: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <!-- head section -->
  <meta charset="utf-8">

  <title>[your title here]</title>

  <link href="index.css" rel="stylesheet" />

</head>
<body>
  <!-- body -->

  <div class="container">
      <div class="content">
        <!-- this is the space where the panels slide over -->
        this is my content
      </div>
      <div id="left-door" class="sliding-panel">
        <p1>CV ? CONTACT</p1>
        <p2>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      Hi! My name is Sacha<br>
      
      </p2>
      </div>
  </div>

  <!-- NO HTML LAYOUT BELOW THIS POINT! -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="index.js"></script>

<!-- the body ends here -->
</body>
</html>
<!-- end of the html document, nothing to see here, move along -->

uj5u.com熱心網友回復：

position:fixed在標題上使用。滾動時應遵循。

有用的提示：不要使用 javascript 為您的元素設定影片，它不支持硬體加速，您幾乎可以看到影片 FPS。

要制作任何影片，請嘗試使用 CSS 影片。只需在門上添加一個類.open并在 CSS 狀態之間進行轉換，在您的情況下只需添加：

#title p1{
  transition: all .5s ease;
}
.open #title p1{
  left:0;
}

這將是一個明顯更平滑的過渡，并且頁面加載速度更快

uj5u.com熱心網友回復：

我對您的 CSS 和 HTML 代碼進行了一些更改，它按您的預期作業。請參閱以下代碼：

$("#left-door").click(function () {
  if ($(this).hasClass("isOpen")) {
    $(this).animate({
      left: "-300px",
    });
  } else {
    $(this).animate({
      left: "0",
    });
  }
  $(this).toggleClass("isOpen");
});

$(window).scroll(function (e) {
  $("#title").css("left", $(window).scrollLeft() * -1);
});

#left-door {
  font-family: helvetica;
  position: fixed;
  top: 0;
  left: -300px;
  width: 350px;
  height: 100vh;
  border-right: 1px solid black;
}

#title {
  height: 100%;
  width: 50px;
  font-family: helvetica;
  font-size: 37px;
  text-align: center;
  writing-mode: vertical-rl;
  position: absolute;
  right: 0;
}

#title span:hover {
  color: rgb(255, 79, 251);
}

#content {
  margin-right: 50px;
}

.isOpen#left-door {
  left: 0;
}

.isOpen #title {
  height: 50px;
  width: 100%;
  text-align: center;
  writing-mode: unset;
  position: relative;
  right: unset;
}

.isOpen #content {
  margin-right: unset;
}

<div id="left-door" class="sliding-panel">
      <div id="title">
        <span>CV ? CONTACT</span>
      </div>

      <div id="content">
        ABOUT<br />
        <br />
        Hi! My name is Sacha van Alfen.<br />
        I am a Graphic Designer who recently graduated from the Royal Academy of
        Arts with a great interest in (motion) typography, print and exhibition
        design. I like to work digital as much as I like to work with print.
        Projects I work on vary from playful websites to data-scraping
        installations, type design, publications, broadsheets, a game about the
        ecological footprint of animal agricult, motion typography and more.
        <br />
        <br />
        <hr class="new1" />
        <br />
        <hr class="new1" />
        <br />
        CV
        <br />
        <br />
        EDUCATION
        <br />
        <br />
        2011 – 2016<br />
        Pre-university school, N&G / C&M<br />
        with German and art as electives,<br />
        St. Michael College, <br />Zaandam<br />
        <br />
        2016 – 2017<br />
        Pre-course <br />
        Gerrit Rietveld Academy, <br />Amsterdam<br />
        <br />
        2017 – now<br />
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我建議你使用彈性盒子而不是定位。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315372.html

標籤：javascript html 查询 css

上一篇：Jquery不適用于多次使用的Vue組件

下一篇：重復結果以從陣列中提取資料