There is a central content block and there is a right sidebar. It is necessary to slow down the scrolling of the right sidebar by the amount of the difference in their heights. The scrolling of both blocks should end in the same place, "coming to the finish" at the same time

$(document).ready(function(){ var content_height = $('.content').height(); // получаем высоту контента var sidebar_height = $('.sidebar').height(); // получаем высоту сайдбара var slow_ratio = Math.round(parseInt(content_height)/parseInt(sidebar_height)); //рассчитываем коэффициент замедления if(slow_ratio > 1){ // если разница больше 1, то нужно замедлить прокрутку $('.sidebar') в slow_ratio раз, то есть оба блока должны "приходить к финишу" одновременно, так сказать } });
  • Let me clarify, why not use a ready-made plug-in? In order to study you want to do it yourself? - VenZell 2:42 pm
  • I did not come across the finished plug-in There are variants of the code in which a separate block is inhibited when scrolling to the page before it. And they are based on changing the amount of indentation for fixed positioning. I don’t like it when there is a lot of extra code in the plugin, I would like only what is needed. And experience, of course, will not be superfluous! - Torawhite

1 answer 1

Use data-scroll-speed in the right block. Calculate the height ratio of the blocks yourself.

Example:

 $.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($(this))); }); window.onscroll = function(){ var scrollTop = $window.scrollTop(); instances.forEach(function(inst){ inst.update(scrollTop); }); } } var moveItItem = function(el){ this.el = $(el); this.speed = parseInt(this.el.attr('data-scroll-speed')); }; moveItItem.prototype.update = function(scrollTop){ var pos = scrollTop / this.speed; this.el.css('transform', 'translateY(' + -pos + 'px)'); }; $(function(){ $('[data-scroll-speed]').moveIt(); }); 
 .content { height: 3000px; } .wrapper { position: fixed; } .wrapper .box { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 160%; color: #fff; position: absolute; background: #ff8330; } .wrapper .box:nth-of-type(2) { left: 100px; background: #E01B5D; } .wrapper .box:nth-of-type(3) { left: 200px; background: #30FFFF; } .wrapper .box:nth-of-type(4) { left: 300px; background: #B3FF30; } .wrapper .box:nth-of-type(5) { left: 400px; background: #308AFF; } .wrapper .box:nth-of-type(6) { left: 500px; background: #1BE059; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="content"> <div class="wrapper"> <div class="box" data-scroll-speed="2">S</div> <div class="box" data-scroll-speed="3">C</div> <div class="box" data-scroll-speed="6">R</div> <div class="box" data-scroll-speed="5">O</div> <div class="box" data-scroll-speed="9">L</div> <div class="box" data-scroll-speed="4">L</div> </div> </div>

An example of adding an attribute using javascript :

 document.getElementsByID("your-block").setAttribute("data-scroll-speed", "your-value");
  • Thank. And what is a bad variable? I get the block as ajax, then I consider its height and I get the difference between the content block, nothing prevents it from being written to the data-scroll-speed attribute, of course. The script is not checked when updating the scrolled page? - Torawhite
  • @Torawhite The variable is not bad, you can also insert it into the data-scroll-speed='your value' attribute, using javascript - user192664
  • @Torawhite Added an example of adding the data-scroll-speed attribute - user192664
  • Thank you very much. The main thing is that the script worked when updating the scrolled page. Now I will try - Torawhite