Скроллинг страницы и плавающая боковая колонка

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

Данный эффект можно реализовать, используя свойство css position со значением fixed, однако для лучшего эффекта воспользуемся возможностями jQuery.

HTML-разметка просто до невозможности. Всякие комментарии излишни.

HTML

<header>
<!-- "шапка" сайта -->
</header>

<div id="wrap">

<div id="sidebar">
<!-- содержимое правой боковой колонки -->
</div>

<div id="container">
<!-- содержимое основного контейнера -->
</div>

</div> <!-- end wrap -->

CSS стили так же не отличаются замысловатостью:

CSS

     
header {
	width: 100%;
	height: 100px;
	background: #d7d53f;
	}

#wrap   {
	width: 600px;
	margin: 0 auto;
	}

#sidebar {
	float: left;
	width: 200px;
	background: #c2b3c6;
	margin-left: -220px;
	}

Конечно, чтобы все работало, необходимо добавить библиотеку jQuery.

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

Ну а вот перед вами и сам скрипт. Вы можете добавить его к себе непосредственно в файл, вставив его между тегами script, или занесите его в ваш общий файл с javascript кодом, если таковой имеется. Все предельно просто и я думаю, вам не составит никакого труда, при желании, реализовать плавающий боковой блок на своем сайте.

JQuery

           
 $(document).ready(function(){
           //ф-я offset возвращает координаты отн-но начала страницы	
var sidebartop = $('#sidebar').offset().top;	
			
$(window).scroll(function(){
						  
 if( $(window).scrollTop() > sidebartop ) 
        { // ф-я scrollTop() возвращает величину вертикального скроллинга
	        $('#sidebar').css({position: 'fixed', top: '30px'});
        }
		else 
		{
            $('#sidebar').css({position: 'static'});
        }
    });

   })
   

Источник