I am trying to make the col-md-4 column stop scrolling once it reaches the end of the content, similar to the right sidebar on Facebook. I have attempted using jQuery to add a fixed position when it reaches the bottom, but it is not working as expected. The goal is for col-md-4 to stop scrolling when the content ends and for col-md-8 to continue scrolling.
<div class="row" style="margin-top:50px;">
<div class="col-md-4 scrollFunc">
<?php require 'includes/profile/description.php'; ?>
<?php require 'includes/profile/photos.php'; ?>
<div class="well"><h1>asd</h1></div>
</div>
<div class="col-md-8" style="padding-left: 5px !important;">
<?php require 'includes/profile/posts.php'; ?>
<div id="displayPosts">
</div>
</div>
</div>
This is why I have included the class scrollFunc:
$(window).scroll(function () {
if ($(window).scrollTop() > 226) {
$(".scrollFunc").addClass("fixed");
console.log('asdad');
} else {
$(".scrollFunc").removeClass("fixed");
}
});
Once it reaches the "asd" well, the scrolling should stop.