Сделать боковую панель липкой при прокрутке страницы - PullRequest
Новая
       7

Сделать боковую панель липкой при прокрутке страницы

0 голосов
/ 28 июня 2019

Я пытаюсь сделать боковую панель моей страницы липкой при прокрутке страницы.

Я пробовал другое решение, но оно не работает ...

Вот моя последняя попытка: 

$( document ).ready(function() {
  console.log( "document ready!" );

  var $sticky = $('.sticky');
  var $stickyrStopper = $('.sticky-stopper');
  if (!!$sticky.offset()) { // make sure ".sticky" element exists

    var generalSidebarHeight = $sticky.innerHeight();
    var stickyTop = $sticky.offset().top;
    var stickOffset = 0;
    var stickyStopperPosition = $stickyrStopper.offset().top;
    var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
    var diff = stopPoint + stickOffset;

    $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); // returns number

      if (stopPoint < windowTop) {
          $sticky.css({ position: 'absolute', top: diff });
      } else if (stickyTop < windowTop+stickOffset) {
          $sticky.css({ position: 'fixed', top: stickOffset });
      } else {
          $sticky.css({position: 'absolute', top: 'initial'});
      }
    });

  }
});

Вот исходный код моей страницы: https://codepen.io/anon/pen/bPareG

Кто-нибудь из вас может мне помочь, пожалуйста?

Большое спасибо.

1 Ответ

1 голос
/ 28 июня 2019

Как было также рекомендовано в комментарии robinvrd, я бы использовал фиксированную позицию, поскольку это позволяет избежать трудностей с вычислением новой Y-позиции (лучше сказать, что браузер позаботится об этом внутренне). Поэтому, если вы хотите, чтобы ваш стикер прокручивался до тех пор, пока он не достигнет конца порта просмотра, а затем остался видимым сбоку, это было бы решением: 

$(window).scroll(function() {
  // scroll event
  var windowTop = $(window).scrollTop(); // returns number

  if (stickyTop < windowTop + stickOffset) {
    $sticky.css({ position: "fixed", top: 0, right: 0 });
  } else {
    $sticky.css({ position: "absolute", top: "initial", right: 0 });
  }
});

Измененный код можно найти в упомянутом Codepen .

...