Сделать фиксированную позицию, при перелистывании определенного числа пикселей

nikki4 · June 15, 2016

На некоторых сайтах видел такую штуковину: справа висят блоки рекламы/подписки.
и когда посетитель пролистывает до самого конца, что в сайдбаре становится пусто, то один из блоков становится плавающим.

наверное это js?

но какое свойство отвечает, что если страница пролистана на 1200 пикселей например, тогда присвоить блоку фиксированную позицию.

причем чтобы это работало только на декстопах. так как в мобильной версии сайдбар убирается под контент у футера.

т.е.: если разрешение экрана>980px и пролистано 1200px класс такой-то = position:fixed;

Edited June 15, 2016 by nikki4

Kirill M · June 15, 2016

В jQuery есть обработчик события - прокручивания страницы в браузере .scroll()

Есть функция .scrollTop() - возвращающая или изменяющая величину скроллинга элемента.

Например:

$(window).on("scroll", function() {
	var scroll_from_top = $(document).scrollTop();
	$("#my_element").toggleClass("fixed", (scroll_from_top > 1200));
});

Launder · June 15, 2016

4 часа назад, nikki4 сказал:

какое свойство отвечает, что если страница пролистана на 1200 пикселей например, тогда присвоить блоку фиксированную позицию

position: sticky;
top: 1200px;

Правда работает это, похоже от высоты экрана. А поднимется вверх блок когда его снизу будет что-то подпирать.

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

Edited June 15, 2016 by Launder

nikki4 · August 7, 2016

нашел один из сайтов, где сделали такую штуку, что тоже хочу:

<div class="ad airSticky airSticky_relative" style="width: 277px;">

как только пролистываешь до опредленного момента:

<div class="ad airSticky airSticky_fixed" style="width: 277px; position: fixed; top: 0px;">

http://ablexur.ru/pervye-blyuda/sup-s-yajcom-i-vermishelyu/

это и есть тот js? можно как-то вытащить этот скрипт?

впрочем посмотрю те варианты, что предложили уже выше, а то забыл про эту тему. а тут вдруг вспомнил, как увидел этот сайт

Edited August 7, 2016 by nikki4

nikki4 · August 10, 2016

Посмотрел пример на этом сайте в справочнике, но почему-то не работает.

если top у стики стоит в пределах размера экрана - то все ОК.

если же поставить например: top:4000px;

тогда стики не срабатывает, в чем дело?

https://jsfiddle.net/9ngc98we/

<!DOCTYPE html>
<html lang="ru"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Пример CSS3 position: sticky</title> 
<style>
  body {
    margin: 0;
    text-align: center;
    font-family: sans-serif;
  }
  .fixed {
    position: fixed;
    top: 0;
  }
  .sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 10px;
  
    width: 100%;
    background: #F6D565;
    padding: 25px 0;
    text-transform: uppercase;
  } 
  
</style>
</head>
<body>
<p style="margin-bottom:100px;">Верх этой страницы</p>
<h3 class="sticky">Супер удивительный заголовок</h3>
<p style="margin-top:500px;">Там еще?</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Там еще?</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Там еще?</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Низ страницы!</p>
<script>
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
                                  sticky.classList.remove('fixed');
}

document.addEventListener('scroll', onScroll);
</script>


</body></html>

пробовал заменить скрипт на

<script>
$(window).on("scroll", function() {
	var scroll_from_top = $(document).scrollTop();
	$(".sticky").toggleClass("fixed", (scroll_from_top > 10));
});

</script>

вообще не работает. почитал выше, надо так понимаю jquery подключить к примеру выше

попробовал на сайте где он включен

но не помогло

<script>
$(window).on("scroll", function() {
	var scroll_from_top = $(document).scrollTop();
	$("#lsb").toggleClass("fixed", (scroll_from_top > 1000));
});

</script>

нашел рабочий скрипт, он делает он просто плавающий блок, а как сюда добавить условие, что только после 2000px например начинает позиция fixed?

<script type="text/javascript">
	$(function() {
		var offset = $("#lsb").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#lsb").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#lsb").stop().animate({marginTop: 0});};});
	});
</script>

Edited August 10, 2016 by nikki4

Sign In

Сделать фиксированную позицию, при перелистывании определенного числа пикселей

Recommended Posts

nikki4

Link to comment

Share on other sites

Kirill M

Link to comment

Share on other sites

Launder

Link to comment

Share on other sites

nikki4

Link to comment

Share on other sites

nikki4

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information