我将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>
答案 0 :(得分：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>
答案 1 :(得分：0)
将white-space: nowrap添加到您的旋转文字。
#rotateTextCont {
position: relative;
margin-top: 60px;
white-space: nowrap;
}
JSFiddle：http://jsfiddle.net/8rsp7k36/