You need a js script or another solution, how to scroll a fixed block together with the content part, approximately as in vk done: http://prnt.sc/dhxzny

  • I already docked with this "problem". If I find the script that I wrote, then I'll throw it off - Yuri

1 answer 1

I made a new jQuery script that is more flexible:

$.prototype.sticky = function(status) { var e = this, elem = {height: $(e).outerHeight(), top: $(e).offset().top - parseFloat($(e).css('margin-top')), bottom: $(e).offset().top - parseFloat($(e).css('margin-top')) + $(e).outerHeight(true), diff: $(e).offset().top - parseFloat($(e).css('top'))}, scrollTop = $(window).scrollTop(); if(status == true || status == undefined || status == 1 || status == 'on'){ $(e).prop('sticky', true); $(window).scroll(function() { if($(e).prop('sticky') == true){ if($(window).height() < $(e).outerHeight(true)){ if(scrollTop < $(window).scrollTop()){ elem.bottom = $(e).offset().top - parseFloat($(e).css('margin-top')) + $(e).outerHeight(true); if($(window).scrollTop() + $(window).height() > elem.bottom){ $(e).css({bottom: $(window).scrollTop() * -1, top: 'auto'}); }; }else if(scrollTop > $(window).scrollTop()){ elem.top = $(e).offset().top - parseFloat($(e).css('margin-top')); if($(window).scrollTop() < elem.top){ $(e).css({top: $(window).scrollTop(), bottom: 'auto'}); }; }; scrollTop = $(window).scrollTop(); }else{ $(e).css({top: $(window).scrollTop(), bottom: 'auto'}); }; }; }); }else if(status == false || status == 0 || status == 'off'){ $(e).prop('sticky', false); $(e).css({top: '', bottom: ''}); }; };

It starts like this:

 $(elem).sticky(true); // Вместо true можно указать: 1, вообще ничего не указывать, on

You can also turn it off:

 $(elem).sticky(false); // Вместо false можно указать: 0 или off

Here is a live example (example on an external editor: jsfiddle-sj3cd0cL ) :

 $.prototype.sticky = function(status) { var e = this, elem = {height: $(e).outerHeight(), top: $(e).offset().top - parseFloat($(e).css('margin-top')), bottom: $(e).offset().top - parseFloat($(e).css('margin-top')) + $(e).outerHeight(true), diff: $(e).offset().top - parseFloat($(e).css('top'))}, scrollTop = $(window).scrollTop(); if(status == true || status == undefined || status == 1 || status == 'on'){ $(e).prop('sticky', true); $(window).scroll(function() { if($(e).prop('sticky') == true){ if($(window).height() < $(e).outerHeight(true)){ if(scrollTop < $(window).scrollTop()){ elem.bottom = $(e).offset().top - parseFloat($(e).css('margin-top')) + $(e).outerHeight(true); if($(window).scrollTop() + $(window).height() > elem.bottom){ $(e).css({bottom: $(window).scrollTop() * -1, top: 'auto'}); }; }else if(scrollTop > $(window).scrollTop()){ elem.top = $(e).offset().top - parseFloat($(e).css('margin-top')); if($(window).scrollTop() < elem.top){ $(e).css({top: $(window).scrollTop(), bottom: 'auto'}); }; }; scrollTop = $(window).scrollTop(); }else{ $(e).css({top: $(window).scrollTop(), bottom: 'auto'}); }; }; }); }else if(status == false || status == 0 || status == 'off'){ $(e).prop('sticky', false); $(e).css({top: '', bottom: ''}); }; }; $(function() { $('.modal').sticky(true); $('body').on('click', '#on', function() { $('.modal').sticky(true); $('#on').attr('id', 'off').html('Отключить sticky'); }); $('body').on('click', '#off', function() { $('.modal').sticky(false); $('#off').attr('id', 'on').html('Включить sticky'); }); }); 
 body {height: 2000px;} .modal { position: absolute; right: 60px; width: 200px; height: 700px; background-color: #000; color: white; border-top: 3px solid red; border-bottom: 3px solid green; margin: 20px 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal"> </div> <div style="position:fixed;top:0;left:0;" > <button id="off">Отключить sticky</button> </div>

  • Thank you so much! - Andrei Talanin
  • @AndreyTalanin, better not ask such questions. This is not a club "skillful hands." There should be specific questions, not requests - Yuri
  • one
    @AndreyTalanin, I wrote a new script for this question, see the answer - Yuri