Липкий элемент вверху при прокрутке

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

Я изо всех сил пытаюсь реализовать это, поэтому помощь будет оценена по достоинству. Это то, что я пробовал:

 <div id = "floating-sidebar-sticky-wrapper" class = "floating-sidebar-wrap" style = "height: 696px;">
 <div id = "floating-sidebar"></div>
</div>


 <script>
    $(window).on('load',function(){
      $("#floating-sidebar").sticky({ topSpacing: 0, wrapperClassName: "floating-sidebar-wrap" });
    });
  </script>

javascript html css

29.05.2019 04:41

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

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

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

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

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

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

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

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

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

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

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

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

108

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

Ответы 3

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

Для этого вам не нужен javascript или даже jquery.

Попробуйте позицию CSS Липкий

.top-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background:black;
  color: white;
  line-height: 2em;
}
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 2em;
  background-color: #ccc;
  padding: 5px;
  font-size: 20px;
}

<div class = "top-nav">Top nav</div>
<div class = "">
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how  sticky positioning works.</p>
<div class = "sticky">I will stick to the screen when you reach my scroll position</div>

<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p>
<div class = "sticky" style = "background:red">I will stick to the screen when you reach my scroll position</div>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p>
</div>

29.05.2019 04:43

попробуйте: он не использует jquery или javascript.

.content-section {
  min-height: 2000px;
}
.sidebar-section {
  position: absolute;
  height: 100%;
  width: 100%;
}


.sidebar-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	/* Position the items */
	// &:nth-child(2) { top: 25%; }
	// &:nth-child(3) { top: 50%; }
	// &:nth-child(4) { top: 75%; }
}


.make-me-sticky {
  position: -webkit-sticky;
	position: sticky;
	top: 0;
    
  padding: 0 15px;
}



/* Ignore This, just coloring */
body {
  background: #fff;
}

article {
  background: white;
  border-radius: 12px;
  padding: 25px 0 600px;
}


.title-section, .content-section, .sidebar-section {
  background: #fff;
  // border-radius: 12px;
  // border: solid 10px #f1f1f1; 
}

.title-section {
  text-align: center;
  padding: 50px 15px;
  margin-bottom: 30px;
}

.content-section h2 {
  text-align: center;
  margin: 0;
  padding-top: 200px;
}

.sidebar-item {
  text-align: center;
  
  h3 {
    background: gold;
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 0 100px; 
    border-bottom: solid 1px #fff;
  }
}

<article>
   <div class = "container-fluid">
   <div class = "row">
   <div class = "col">
   <div class = "title-section">
        <h1>Your Navigation Bar</h1>
   </div>
   </div>
   </div>
   
   <div class = "row">
   <div class = "col-7">

   <div class = "content-section">
        <h2>Your Body Content Section</h2>
   </div>
   </div>
   <div class = "col-5">

   <div class = "sidebar-item">
   <div class = "make-me-sticky">
        <h3>Your Sidebar</h3>
   </div>
   </div>
          

   </div>
   </div>
   </div>
</article>

источник: кодепен

29.05.2019 05:26

Я пробовал это в Chrome. Укажите верхнее значение в качестве высоты панели навигации, чтобы оно всегда было ниже панели навигации, когда пользователь будет прокручивать вверх.

position: sticky;
top: 100px;---Replace 100 with your Nav bar height
z-index: 99;

29.05.2019 05:34

Другие вопросы по теме

Как расширенный шаблон вызвать другой шаблон в jinja2?

Гамбургер меню покрывает логотип

Ввод внутри div не кликабельный

Попытка скрыть элементы моей игры до тех пор, пока не будет выполнено условие

Jquery - метод post () получает ошибку «не найдено»

Функция «Нажмите, чтобы пообщаться» больше не работает в WhatsApp?

IOS Safari: нежелательная прокрутка при открытии клавиатуры и отключении основной прокрутки

Сделайте части изображения перекрывающимися на планшете/рабочем столе, но не на мобильном телефоне

Воспроизведение звукового уведомления при появлении определенного текста на странице

Как заставить текст, выровненный по правому краю, перемещаться на новую строку при переключении на мобильное представление

Липкий элемент вверху при прокрутке

Ответы 3

Другие вопросы по теме

Похожие вопросы