javascript - 使用窗口滚动将其更改为固定时保持元素位置

Question

我正在将 div 的位置更改为固定，一旦它到达特定部分，然后一旦它到达 #subSolSec，它就会返回到 position:relative。

我遇到的问题是，当 #rotateTextCont 应用了 position:fixed 时，它会超出其原始格式。

位置转为固定后，如何保持原来的格式？

$(window).scroll(function(e) {
  if ($(this).scrollTop() >= $('#subSolSec').offset().top - 50) {
    $('#rotateTextCont').removeClass('fixed');
  } else {
    $('#rotateTextCont').addClass('fixed');
  }
});

#blue {
  width: 100%;
  height: 300px;
  background: blue;
}
.sec60 {
  width: 60%;
  margin: 60px auto;
}

#rotateTextCont {
  position: relative;
  margin-top: 60px;
}

#rotateTextCont.fixed {
  position: fixed;
  /*left: 0%;
    top: 50%;
    transform: translateY(-50%);*/
}

#rotateText {
  position: absolute;
  left: 0%;
  top: 50%;
  -webkit-transform: rotate(-90deg) translateX(-50%);
  transform: rotate(-90deg) translateX(-50%);
  font-family: 'Nunito', sans-serif;
  letter-spacing: .2rem;
  font-size: 2rem;
  color: #b82222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="blue">
</section>
<div id="rotateTextCont">
  <div id="rotateText">Fixed Text</div>
</div>
<section class="sec60">
  <p class="dG">
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  </p>
  <p class="dG">
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  </p>
</section>
<section id="subSolSec">

</section>

Answer 1

为了示例，我包含了一些虚拟偏移值，现在关于您的问题，您可以考虑使用 max-content 的可能性(注意代码中特定于浏览器的前缀)，它是我能找到的最简单的方法，尽管我强烈推荐 looking here检查浏览器兼容性并针对您的潜在客户进行评估。

编辑

包含注释的 CSS 以使其在 Chrome 中工作。我工作的地方没有 Chrome，但根据 caniuse.com它也适用于 Chrome。让我知道

var reachesSpecificSection = 60;
var reachesSubSolSec = 350;
$(window).scroll(function (e) {
let scrollTop = $(this).scrollTop();
		if(scrollTop > reachesSpecificSection && scrollTop < reachesSubSolSec){
			$('#rotateTextCont').addClass('fixed');
      
		} else {
		$('#rotateTextCont').removeClass('fixed');
    
	  }
	});

.sec60 {
	width: 60%;
	margin: 60px auto;
}
#rotateTextCont {
	position: relative;
	/*margin-top: 60px;*/
}
#rotateTextCont.fixed {
	position: fixed;
  top: 0;
	/*left: 0%;
    top: 50%;
    transform: translateY(-50%);*/
}
#rotateText {
	position: absolute;
	left: 0%;
	top: 50%;
	-webkit-transform: rotate(-90deg) translateX(-50%);transform: rotate(-90deg) translateX(-50%);
	font-family: 'Nunito', sans-serif;
	letter-spacing: .2rem;
	font-size: 2rem;
	color: #b82222;
  width: -moz-max-content; /*Mozilla Firefox*/
  width: -webkit-max-content; /*iOS Safari*/
  width: max-content; /*Rest of supported browsers (including Chrome)*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="rotateTextCont">
			<div id="rotateText">Fixed Text</div>
		</div>
		<section class="sec60">
			<p class="dG">
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
			</p>
			<p class="dG">
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
			</p>
		</section>