Какую реализацию «липкого» блока на js или jquery посоветуете?

Существует несколько способов реализации "липкого" блока (sticky block) с использованием JavaScript или jQuery. Рассмотрим два наиболее распространенных метода.

Первый метод основан на использовании CSS свойства position: sticky, которое позволяет элементу оставаться "приклеенным" к определенной позиции на странице, когда пользователь прокручивает страницу. Однако, это свойство не поддерживается всеми браузерами, поэтому мы можем использовать JavaScript или jQuery для полифилла (fallback) во встроенных решениях.

Вот пример реализации "липкого" блока с использованием CSS и JavaScript:

HTML:

<div class="sticky-block">
  <!-- Ваш контент здесь -->
</div>

CSS:

.sticky-block {
  position: sticky;
  top: 0;
  /* Дополнительные стили для блока */
}

JavaScript:

var stickyBlock = document.querySelector('.sticky-block');
var stickyWrapper = stickyBlock.parentNode;

function updateSticky() {
  var wrapperRect = stickyWrapper.getBoundingClientRect();
  var blockRect = stickyBlock.getBoundingClientRect();
  
  if (blockRect.top <= 0 && blockRect.bottom > wrapperRect.bottom) {
    stickyBlock.classList.add('sticky');
  } else {
    stickyBlock.classList.remove('sticky');
  }
}

document.addEventListener('scroll', updateSticky);

Второй метод основан на использовании JavaScript или jQuery для отслеживания прокрутки страницы и изменения позиции блока в зависимости от положения прокрутки.

Вот пример реализации "липкого" блока с использованием jQuery:

HTML:

<div class="sticky-block">
  <!-- Ваш контент здесь -->
</div>

CSS:

.sticky-block {
  /* Дополнительные стили для блока */
}

JavaScript (с использованием jQuery):

$(document).ready(function() {
  var stickyBlock = $('.sticky-block');
  var stickyWrapper = stickyBlock.parent();
  var wrapperOffset = stickyWrapper.offset().top;

  function updateSticky() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > wrapperOffset) {
      stickyBlock.addClass('sticky');
    } else {
      stickyBlock.removeClass('sticky');
    }
  }

  $(window).scroll(updateSticky);
});

Оба метода имеют свои преимущества и недостатки, и выбор зависит от ваших нужд и требований проекта. Если вам необходима поддержка старых браузеров или у вас уже используется jQuery, второй метод может быть предпочтительным. Однако, если вы используете современные браузеры и хотите использовать только CSS свойство, первый метод будет более эффективным и простым в реализации.