How to make a floating panel like on Vkontakte using jQuery?

Question

css

How to make such a floating panel on jQuery?
Like here, right panel : vk.com/search

when scrolling down, it scrolls to its bottom border, and further, when scrolling down, the user always sees the bottom of this panel. If he then starts scrolling up, the panel also starts scrolling up until the top border of that panel appears and then when scrolling up, the top of the panel is always visible to the user.

To see, make the browser window small, and after that go to vk.com/search, and see how the right panel behaves when scrolling up and down the page.

Answer 1

jQuery(document).ready(function ($) {
  $fixed = $('#your-id'); // ID элемента
  $(window).scroll(function(){
      if($(window).scrollTop()>254) // Если сверху проскроллено 254 пикселя
      {
        $fixed.css({position:"fixed", top:0}); // То фиксируем элемент
      }
      else // Если нет
      {
        $fixed.css({position:"relative", top:0}); // То возвращаем стили
      }
  });
});

Answer 2

mojotech.github.io/stickymojo

Answer 3

stickyjs.com I used it in the last project for the same panel

Answer 4

HTML:
CSS:

.ui-panel.ui-panel-open {
    position:fixed;
}
.ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
.ui-page-active.ui-page-panel {
height: 70%;
}