Плавающий элемент в родителе
Простой 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