window.onscroll = function() { if ($('#sideBar').offset().top + $('#sideBar').height() >= $('#liveCommentsBlock').offset().top) { $('#sideBar').css("position", "absolute"); } }; 
 #main { width: 70%; margin-left: 15%; } #cont { position: relative; margin-top: 30px; width: 100%; } #mainContent { position: relative; float: left; width: 80%; } #mainContentArt { width: 86%; margin-left: 7%; } .article { width: 100%; height: 800px; background: black; margin-bottom: 30px; } #sideBar { position: fixed; width: 18%; left: 50%; margin-left: 17%; } #liveCommentsBlock { position: relative; width: 100%; height: 500px; background: #FCEFFC; margin-bottom: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div id="cont"> <div id="mainContent"> <div id="mainContentArt"> <div class="article"></div> <div class="article"></div> <div class="article"></div> </div> </div> <div id="sideBar"> <div id="sideBarMenu"></div> <div id="sideBarSub"></div> </div> <div class="spacer" style="clear: both;"></div> </div> <div id="liveCommentsBlock"> <p>##COMMENTS##</p> </div> </div>

The bottom line is that the #sideBar block #sideBar after scrolling to a certain place, must “stop” there. However, for now, it stops, but moves to the upper left corner of the #cont block. How to fix this?

  • Did you try to set the position at the end in fixed with the required coordinates? ..... on some relative and absolute the wedge did not converge - Alexey Shimansky
  • Doesn't fixed , makes it follow the scroll? - Sasha
  • And where is the liveCommentsBlock example liveCommentsBlock way? ...... +660 this is the type at which distance liveCommentsBlock?)) - Alexey Shimansky
  • Alexey, this block is under the cont block, and 660 is the height of the sideBar block, since the values .offset().bottom does not exist. - Sasha
  • it is better to add the markup completely .... for now your js is not valid because there is no element to which it is applied .. and in words - is it not enough where it can be there ..... 660 is replaced by a trite one at someElement.height so there are no magical ones Numbers - Alexey Shimansky

1 answer 1

Try to track by scroll :

 window.onscroll = function() { if(window.pageYOffset + 100< $('#liveCommentsBlock').offset().top ){ $('#sideBar').removeAttr('style'); $('#sideBar').css("position", "fixed"); }else { var x = $('#sideBar').offset().top; var y = $('#sideBar').offset().left; $('#sideBar').css("position", "absolute"); $('#sideBar').offset({top:x, left:y}).top; } }; 
 #main { width: 70%; margin-left: 15%; } #cont { position: relative; margin-top: 30px; width: 100%; } #mainContent { position: relative; float: left; width: 80%; } #mainContentArt { width: 86%; margin-left: 7%; } .article { width: 100%; height: 800px; background: black; margin-bottom: 30px; } #sideBar { position: fixed; width: 18%; left: 50%; margin-left: 17%; color:red; } #liveCommentsBlock { position: relative; width: 100%; height: 500px; background: #FCEFFC; margin-bottom: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div id="cont"> <div id="mainContent"> <div id="mainContentArt"> <div class="article"></div> <div class="article"></div> <div class="article"></div> </div> </div> <div id="sideBar"> <div id="sideBarMenu">ehethethterh</div> <div id="sideBarSub">ethethethethert</div> </div> <div class="spacer" style="clear: both;"></div> </div> <div id="liveCommentsBlock"> <p>##COMMENTS##</p> </div> </div>

  • Tell window.pageYOffset + 100 why you need +100 in window.pageYOffset + 100 ? It seems that everything works, I will try to use your version in the project. But I would like to know the answer to the question. - Sasha
  • If you do not add a 100px top your fixed block will go under the comment block, which is not very good. And so it stops before the position of the scroll is equal to the top of the comment block. - C.Raf.T