左侧滑动门如何实现标题垂直固定、水平跟随门体移动的效果

问题根源 #

你当前的问题是滑动门容器#left-door设置了overflow:auto，且标题<p1>是基于该滚动容器的绝对定位，容器滚动时绝对定位的元素会随内容一同滚动。

解决思路 #

拆分滑动门结构，将固定标题和可滚动内容分离，滚动仅作用于内容容器，标题直接基于滑动门容器定位即可，不需要修改原有JS逻辑。

修改后的代码 #

HTML 部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>[your title here]</title>
  <link href="index.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
      <div class="content">
        this is my content
      </div>
      <div id="left-door" class="sliding-panel">
        <p1>CV • CONTACT</p1>
        <!-- 新增独立的滚动内容容器 -->
        <div class="door-content">
          <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>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

CSS 部分

*,
*: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 */
}

/* 新增滚动内容容器样式 */
.door-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px 20px;
}

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;
  line-height: 20px;
  /* 移除原有绝对定位相关属性 */
}

JS 部分（无需修改）

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

效果说明 #

滑动门左右移动时标题会跟随门体水平移动，门打开后滚动内部内容时，标题始终固定在垂直中间位置，不会随内容滚动消失。

内容的提问来源于stack exchange，提问作者sachava