Эффект липкой боковой панели с Javascript (без использования плагина)

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

Я уже могу сделать липкую боковую панель вверху при прокрутке вниз, но я не знаю, как перестать быть липкой, когда прокрутка доходит до нижнего колонтитула.

Мой Javascript:

var sidebar = $('.cpn_course-sidebar'),
      sidebarDistance = sidebar.offset().top,
      sidebarWidth = sidebar.width(),
      $window = $(window);

  $window.scroll(function() {

    if ( $window.scrollTop() >= sidebarDistance ) {
      $(sidebar).addClass('slideDown');
      $(sidebar).css({'width': sidebarWidth, 'left': 'auto', 'top': '10px'});
    } else {
      $(sidebar).removeClass('slideDown');
    }
  });

Пример Udemy - https://www.udemy.com/the-complete-javascript-course/

Мой пример - https://jsfiddle.net/felipeemarcon/aq9Laaew/225674/

Кто-нибудь может мне помочь? Спасибо.

Существует плагин jQuery для создания умных липких элементов под названием Sticky-Kit, вы можете попробовать его leafo.net/sticky-kit

— 19.09.2018 20:57

@DayronGallardo Я бы хотел сделать это без плагинов. Это слишком сложно?

— 19.09.2018 21:16

Возможно, вам стоит уточнить это в исходном вопросе. Плагин, о котором я упоминал, сделал это почти на 300 строках кода, я думаю, это не так просто.

— 19.09.2018 21:22

Кто-то до вас спрашивал нечто подобное, может это поможет вам -> stackoverflow.com/questions/17135658/…

— 19.09.2018 21:25

position: sticky;?

— 19.09.2018 21:37

javascript sidebar sticky

19.09.2018 20:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

153

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я надеюсь, что это то, что вы хотите, если не скажите мне, пожалуйста.

<section class = "section-1">
<div class = "container">
  <div class = "row">
    <div class = "col-sm-8">
    <h1>Header</h1>
  </div>
  <div class = "col-sm-4">
    <div class = "sidebar" id = "sidebar">
      <h1>Sidebar</h1>
  </div>
  </div>
  </div>
</div>

</section>

<section class = "section-2">
  <div class = "container">
    <div class = "row">
      <div class = "col-sm-8">
        <h1>Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed scelerisque libero. Curabitur laoreet vitae ante ac porttitor. Sed venenatis pellentesque lacus. Nam sed augue diam. Proin vehicula diam non nulla pulvinar lobortis lacinia eu leo. Maecenas vestibulum lacinia augue, eget egestas turpis efficitur eget. Maecenas ut hendrerit dolor, et rutrum risus. Quisque dictum purus non nisi fringilla, in aliquet metus blandit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed scelerisque libero. Curabitur laoreet vitae ante ac porttitor. Sed venenatis pellentesque lacus. Nam sed augue diam. Proin vehicula diam non nulla pulvinar lobortis lacinia eu leo. Maecenas vestibulum lacinia augue, eget egestas turpis efficitur eget. Maecenas ut hendrerit dolor, et rutrum risus. Quisque dictum purus non nisi fringilla, in aliquet metus blandit.</p>
      </div>
    </div>
  </div>
</section>

<section class = "section-3" id = "footer">
  <div class = "container">
    <div class = "row">
      <div class = "col-sm-12">
        <h1>Footer</h1>
      </div>
    </div>
  </div>
</section>
<p id = "test">
</p>

.section-1, .section-3 {
  width: 100%;
  background: royalblue;
  height: 250px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar {
  position: absolute;
  top: 0;
  width: 100%;
  right: 0;
  background: #ec5252;
  display: flex;
  justify-content: center;
  height: 300px;
  z-index: 2;
}

.sidebar.slideDown {
  position: fixed;
}


#test{
  position:fixed;
  top:10px;
}

var sidebar = $('#sidebar'),
        sidebarDistanceTop = sidebar.offset().top,
    sidebarWidth = sidebar.width(),
    $window = $(window),
    $document = $(document),
    footer = $('#footer');

$window.scroll(function() {
    let footerHeight = footer.height();
  let sidebarHeight = sidebar.height();
  let scrollTarget = $document.height() - footerHeight - sidebarHeight;
  let sidebarNewPosition = $document.height() - footerHeight - sidebarHeight -sidebarDistanceTop;
  document.getElementById('test').innerHTML = scrollTarget;
    if (($window.scrollTop() >= sidebarDistanceTop)&&
        ($window.scrollTop() < scrollTarget)) {
    $(sidebar).addClass('slideDown');
    $(sidebar).css({'width': sidebarWidth, 'left': 'auto', 'top': '10px'});
  } else if ($window.scrollTop() < sidebarDistanceTop) {
    $(sidebar).removeClass('slideDown');
    $(sidebar).removeClass('footerreached');
  } else if ($window.scrollTop() > scrollTarget){
    $(sidebar).removeClass('slideDown');
    $(sidebar).css({'width': sidebarWidth, 'left': 'auto', 'top': sidebarNewPosition + 'px'});
  }
});

jsfiddle: https://jsfiddle.net/ftyxcLr5/36/

с уважением :)

20.09.2018 11:53