Freezing a column after Row View in HTML

Question

is there any way to freeze a column after scrolling down in HTML view. For example;

I have html view like;

 <div class="row" id="firstRow">
    ...
 </div>

 <div class="row" id="secondRow">
    <div class="sticky-left-banner"></div>
 </div>

I basically want to freeze the left column when the user starts the view secondRow.I created CSS class for freeze but it freezes the column starting from firstRow. Is there a way to do it with pure Javascript or something else?

My CSS class for freezing;

.sticky-left-banner{
position:fixed;
top:100px;
left:50px;
height:200px;
opacity:0.9;
}

Answer 1

You can do it by checking whether you've scrolled past the position of your row, and toggling the class based on that. Try it by clicking the blue button bellow, and tell me if that's not the effect you want:

$(window).scroll(function(){
  $('.columnLeft').toggleClass(
    'sticky-left-banner',
    $(window).scrollTop() > $('#secondRow').offset().top
  );
});

.row{
  position: relative; /* Makes position of sticky div relative to its parent row */
}

.columnLeft{
  position:absolute;
  top: 100px;
  left: 50px;
  height: 50px;
  width: 30px;
}

.sticky-left-banner{
  position: fixed;
  opacity: .9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row" id="firstRow">
    <h2>This is an example title</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vehicula lacinia. Ut ex sem, euismod vitae lacus ultrices, laoreet euismod quam. Praesent urna eros, auctor non commodo non, volutpat et urna. Maecenas justo lorem.</p><p>Aliquet eu semper sit amet, pharetra in sem. Suspendisse ut lorem lectus. Phasellus ut suscipit enim, eu efficitur urna. Pellentesque congue, magna et rhoncus pellentesque, tellus nunc commodo urna, ut vulputate orci tellus in nulla. Fusce gravida sollicitudin mi, et blandit neque cursus eget. Nullam a diam pretium turpis ullamcorper gravida sed id turpis. Duis et nisl diam.</p><p>Proin pharetra pulvinar neque, sed dictum metus accumsan ut!</p>
 </div>

 <div class="row" id="secondRow">
    <div class="columnLeft"></div>
    <h2>Here comes the second section</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vehicula lacinia. Ut ex sem, euismod vitae lacus ultrices, laoreet euismod quam. Praesent urna eros, auctor non commodo non, volutpat et urna. Maecenas justo lorem.</p><p>Aliquet eu semper sit amet, pharetra in sem. Suspendisse ut lorem lectus. Phasellus ut suscipit enim, eu efficitur urna. Pellentesque congue, magna et rhoncus pellentesque, tellus nunc commodo urna, ut vulputate orci tellus in nulla. Fusce gravida sollicitudin mi, et blandit neque cursus eget. Nullam a diam pretium turpis ullamcorper gravida sed id turpis. Duis et nisl diam.</p><p>Proin pharetra pulvinar neque, sed dictum metus accumsan ut!</p><p>Phasellus vel urna tellus. Aliquam eu ultricies ante. Maecenas pellentesque tellus eget nisi mattis vulputate. Aliquam at urna tellus. Fusce fringilla, lacus in posuere scelerisque, purus tellus finibus lorem, vitae congue mauris mi sit amet diam.</p><p>Fusce tincidunt, metus in molestie pulvinar, ex urna laoreet urna, nec viverra ligula justo a nisl. Nunc nisi nisl, dapibus eu augue ac, congue eleifend ante. Ut euismod, elit vel facilisis lobortis, neque velit euismod sapien, a pretium augue lorem tincidunt justo.</p><p>Nam varius molestie ullamcorper. Nulla varius, justo quis sollicitudin faucibus, libero tellus ultrices nibh, non pellentesque enim lectus id nisl. Fusce quis mattis dolor. Duis id libero nec odio feugiat lobortis ut porttitor metus. Donec ac velit condimentum urna elementum mollis.</p><p>Suspendisse interdum est et sem molestie tincidunt. Sed et facilisis dui. Donec mauris elit, mollis sit amet justo quis, lobortis tempor ex. Nullam eleifend leo sit amet ex tincidunt, vitae laoreet ante bibendum.</p><p>Quisque eu sodales sapien. Sed ullamcorper mauris ac justo ultricies, hendrerit tempus lacus accumsan. Nam vitae dui eget justo consectetur rutrum. Nunc ultricies eros id placerat semper. Nam a lacus lorem.</p><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;color:#fff}h2,p{margin-bottom:1em}.row{padding:1em 5% 1em 20%}#firstRow{background:#2682b1}#secondRow{background:#c92c4b}.columnLeft{background:rgba(255,255,255,.3)}</style>
 </div>

Answer 2

$(document).ready(function(){
  $(window).scroll(function(){
    $('.row').addClass('.sticky-left-banner');
   });
});

This function should add the class to your .row div while scrolling. If u can give me a jfiddle with the row html I can modify it for u ;)