Keeping an elements position when changing it to fixed with window scroll

Question

I am changing a div's position to fixed once it reaches a specific section and then once it reaches #subSolSec, it goes back to position:relative.

The issue I am having is that when #rotateTextCont has position:fixed applied, it goes out of its original format.

How do I keep the original format when the position is turned to 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

Add white-space: nowrap to your rotated text.

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

JSFiddle: http://jsfiddle.net/8rsp7k36/

Answer 2

I included some dummy offset values for the sake of the example, now regarding your problem you could entertain the possibility of using max-content (notice the browser-specific prefix in the code), it is the easiest way I could find, although I strongly recommend looking here to check for browser compatibility and assess against your potential clients.

EDIT

Included commented css to make it work in Chrome. I don't have Chrome where I'm working but according to caniuse.com it works in Chrome too. Let me know

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>