Липкие блоки jquery?

Question

[systemiv]

Добрый вечер Уважаемые!



Нашёл только на руселлере плагинчик, и то по странным причинам он не работает.

Нужно сделать что бы определённый блок отображаемый на страничке(где то по центру вертикали) при прокрутке прилипал к верхней части экрана, до тех пор пока мы не прокрутим страничку вверх, где он встанет на своё место.



Спасибо!

Answer 1

[Влад Фролов]

Я делал такое сам, тут не особо нужен целый плагин.

    $(function() {
        var box = $('#messagelist'); // float-fixed block

        var top = box.offset().top - parseFloat(box.css('marginTop').replace(/auto/, 0));
        $(window).scroll(function(){
            var windowpos = $(window).scrollTop();
            if(windowpos < top) {
                box.css('position', 'static');
            } else {
                box.css('position', 'fixed');
                box.css('top', 0);
            }
        });
    });

Comments

[systemiv]

Спасибо! То что надо!

[dnikonov]

А если у плавающего блока высота больше чем высота окна (например блок с фильтрами), то этот скрипт уже сработает не так как надо. Понадобится доработка.

[Чёкатилло]

А как бы такое сотворить на несколько одноименных блоков, имеющим одно и тоже место на странице (они при прокрутке должны просто друг на друга налезать)??

Answer 2

[Sergey]

Собственно, правильно все сказали выше — никакой плагин не нужен. Но и решение, правда, не совсем верное.
Советую прочитать небольшое руководство как сделать такого вида слой (ползающий по экрану), там же есть и превью (прямо на странице руководства).

Comments

[Sergey]

Ну, и к вышеуказанному руководству есть и готовая библиотека.

[Влад Фролов]

«Липкие» в моём понимании не значит «плавающие» — мой вариант не дёргается при скролинге. Так что у нас слегка разные понятия, но альтеративные варианты лишними не бывают, автор вопроса уже решит какой из вариантов ему нужен…

[Иван Трофимов]

Суть не меняется. Для того чтобы ездило — используется, например, действие .animate(<координаты>, <время анимации>), а для того, чтобы просто прикреплялось используется .css(<координаты>)

Answer 3

[Сергей Некрасов]

$(document).ready(function(){
var obj = $('#sticky');
var offset = obj.offset();
var topOffset = offset.top;
var marginTop = obj.css("marginTop");

$(window).scroll(function() {
var scrollTop = $(window).scrollTop();

	if (scrollTop >= topOffset){

		obj.css({
			marginTop: 90,
			position: 'fixed',
		});
	}

	if (scrollTop < topOffset){

		obj.css({
			marginTop: 20,
			position: 'relative',
		});
	}
});
});

Comments

[positive_90]

Не совсем понял зачем писать каждый раз var, и почему нельза сразу определить offset = obj.offset().top;

Answer 4

[Павел Левин]

Плавающий блок с прилипанием от шапки до футера.