Плавающий элемент в родителе

Простой JS скрипт с использованием jQuery, который зафиксирует элемент с контентом в родительском блоке.

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

Можно использовать для привлечения внимания посетителя к определенному контенту.

HTML

<div class='content'>
    ...
    <div class='rc_stuck_box'>
        <div class='rc_stuck_content'>
            Контент
        </div>
    </div>
    ...
</div>

JS

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    function rc_stuck_box (from) {
        //from - элемент верхнего уровня, от которого идет отчет
        //rc_stuck_content - содержание блока
        //rc_stuck_box - откуда минимально
        var stuck_width = $(".rc_stuck_box").width();
        var page_top = $(".rc_stuck_content").offset().top;
        $(from).scroll(function(){
            var y = $(this).scrollTop();
            var page_height = $(window).height();
            var stuck_height = $(".rc_stuck_content").height();
            if( y >= page_top && page_height > stuck_height ){
                $(".rc_stuck_content").css({"position":"fixed","marginTop":"-"+page_top+"px","width":stuck_width+"px"});
            } else {
                $(".rc_stuck_content").css({"position":"relative","marginTop":"0px"});
            }
        })
    }
    //запуск функции
    rc_stuck_box('.content');
</script >

Обзор

Платформа:
не важно
Технологии:
JavaScript
Тип разработки:
скрипт
Просмотров:
1345