Ivseti
@Ivseti
Фронтенд HTML, CSS и немного JS с PHP

Как остановить плавающий блок на его позиции при прокрутке используя Jquery?

Сейчас мой код выглядит следующим образом:

jQuery(function($) {
    $(window).scroll(function() {
         var top = $(document).scrollTop();
         if (top < 150) $('.fixed-bottom').addClass('fixed'); //200 - это значение высоты прокрутки страницы для добавления класс
         else $('.fixed-bottom').removeClass('fixed');
    });
});

Но проблема заключается в том, что его можно подогнать только под одну определенную высоту, а у меня слайдер с разным кол-вом информации. И нужно условие, которое выполнит .removeClass при достижении скролом блока или области в котором блок стоит изначально стоит без position: fixed;.

Так у меня сейчас работает, пример: https://skr.sh/vG4T3s9Nx9M?a
  • Вопрос задан
  • 125 просмотров
Пригласить эксперта
Ответы на вопрос 1
egor_nullptr
@egor_nullptr
Можно сделать без JS при помощи position: sticky;
https://jsitor.com/hGpU2K4jn
Код

<div class="page">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
		magna aliqua. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Tristique senectus et netus et
		malesuada. Etiam non quam lacus suspendisse faucibus interdum. Gravida dictum fusce ut placerat orci nulla
		pellentesque dignissim. Diam sit amet nisl suscipit adipiscing. Integer eget aliquet nibh praesent tristique
		magna sit amet purus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Amet justo donec enim diam
		vulputate. Commodo nulla facilisi nullam vehicula ipsum a arcu. Nisl vel pretium lectus quam id. Pulvinar
		elementum integer enim neque. Id eu nisl nunc mi ipsum. In massa tempor nec feugiat nisl. Sit amet purus gravida
		quis. Feugiat pretium nibh ipsum consequat nisl vel. Id diam maecenas ultricies mi eget mauris pharetra.</p>
	<p>Suspendisse ultrices gravida dictum fusce ut placerat. Nullam non nisi est sit amet facilisis magna etiam. Eget
		felis eget nunc lobortis mattis aliquam faucibus purus. Mauris pharetra et ultrices neque ornare aenean euismod
		elementum. Dignissim cras tincidunt lobortis feugiat vivamus. Erat pellentesque adipiscing commodo elit at
		imperdiet dui accumsan. Varius vel pharetra vel turpis nunc eget lorem dolor. Pharetra diam sit amet nisl
		suscipit. Sodales ut etiam sit amet nisl purus in mollis. Nibh cras pulvinar mattis nunc. Lacus vestibulum sed
		arcu non. Ut lectus arcu bibendum at varius vel pharetra. Nec nam aliquam sem et tortor consequat id porta nibh.
		Elit sed vulputate mi sit amet mauris commodo. Pulvinar etiam non quam lacus suspendisse faucibus interdum
		posuere. Pellentesque elit ullamcorper dignissim cras. Dolor morbi non arcu risus.</p>
	<p>Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Purus sit amet volutpat consequat mauris nunc
		congue nisi vitae. Ac tincidunt vitae semper quis lectus nulla. Cursus risus at ultrices mi. Ac orci phasellus
		egestas tellus rutrum tellus. Velit laoreet id donec ultrices tincidunt. Consectetur adipiscing elit duis
		tristique sollicitudin. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Elit scelerisque mauris
		pellentesque pulvinar. Rhoncus mattis rhoncus urna neque viverra. In fermentum et sollicitudin ac. Porta lorem
		mollis aliquam ut porttitor leo a. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Habitasse platea
		dictumst quisque sagittis purus sit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros.
		Elit duis tristique sollicitudin nibh. Cum sociis natoque penatibus et magnis dis parturient montes. Pharetra et
		ultrices neque ornare. Nisl tincidunt eget nullam non nisi est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
	magna aliqua. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Tristique senectus et netus et
	malesuada. Etiam non quam lacus suspendisse faucibus interdum. Gravida dictum fusce ut placerat orci nulla
	pellentesque dignissim. Diam sit amet nisl suscipit adipiscing. Integer eget aliquet nibh praesent tristique
	magna sit amet purus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Amet justo donec enim diam
	vulputate. Commodo nulla facilisi nullam vehicula ipsum a arcu. Nisl vel pretium lectus quam id. Pulvinar
	elementum integer enim neque. Id eu nisl nunc mi ipsum. In massa tempor nec feugiat nisl. Sit amet purus gravida
	quis. Feugiat pretium nibh ipsum consequat nisl vel. Id diam maecenas ultricies mi eget mauris pharetra.</p>
<p>Suspendisse ultrices gravida dictum fusce ut placerat. Nullam non nisi est sit amet facilisis magna etiam. Eget
	felis eget nunc lobortis mattis aliquam faucibus purus. Mauris pharetra et ultrices neque ornare aenean euismod
	elementum. Dignissim cras tincidunt lobortis feugiat vivamus. Erat pellentesque adipiscing commodo elit at
	imperdiet dui accumsan. Varius vel pharetra vel turpis nunc eget lorem dolor. Pharetra diam sit amet nisl
	suscipit. Sodales ut etiam sit amet nisl purus in mollis. Nibh cras pulvinar mattis nunc. Lacus vestibulum sed
	arcu non. Ut lectus arcu bibendum at varius vel pharetra. Nec nam aliquam sem et tortor consequat id porta nibh.
	Elit sed vulputate mi sit amet mauris commodo. Pulvinar etiam non quam lacus suspendisse faucibus interdum
	posuere. Pellentesque elit ullamcorper dignissim cras. Dolor morbi non arcu risus.</p>
	<div class="buttons">
		<button>Button1</button>
		<button>Button2</button>
	</div>
	<p>Commodo nulla facilisi nullam vehicula ipsum a arcu. Leo duis ut diam quam nulla porttitor massa id neque.
		Integer eget aliquet nibh praesent tristique. Facilisis volutpat est velit egestas dui. Massa massa ultricies mi
		quis hendrerit. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ipsum nunc aliquet bibendum enim
		facilisis gravida neque convallis. Gravida arcu ac tortor dignissim convallis aenean et. Suspendisse potenti
		nullam ac tortor vitae purus faucibus ornare suspendisse. Ultricies mi eget mauris pharetra. Lectus quam id leo
		in vitae turpis massa sed elementum. Urna et pharetra pharetra massa. Mauris vitae ultricies leo integer
		malesuada nunc vel risus. Sed faucibus turpis in eu mi. Fames ac turpis egestas integer eget aliquet.
		Ullamcorper dignissim cras tincidunt lobortis feugiat. Ut etiam sit amet nisl purus in. Tellus pellentesque eu
		tincidunt tortor aliquam nulla facilisi.</p>
</div>

.page {
  width: 600px;
  margin: 0 auto;
}

.buttons {
  padding: 10px;
  background: white;
  position: sticky;
  bottom: 40px;
  border: solid 1px black;
}

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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