Открыть меню    

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

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

плавающий правый блок, плавает при скроллинге

Данный эффект можно реализовать, используя свойство 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'});
        }
    });

   })
   

Источник

Комментарии к статье

аватарка пользователя
2012-10-18
Анна

Здравствуйте!rnОчень понравилась статья!rnХочу добавить плавающую боковую колонку на свою страницу.rnПодскажите, пожалуйста, как разместить её в шаблоне WP?rnКуда вписать код HTML?rnГде разместить ссылку на JQuery?rnВ каком именно месте в шаблоне СSS разместить текст?rnИ что нужно указать тут: <!-- содержимое правой боковой колонки --> и <!-- содержимое основного контейнера -->?rnЯ новичок. Пробовала методом тыка ))) не получилось...rnПомогите, пожалуйста!!!

аватарка пользователя
2012-10-19
dnzl

код в шаблон вставить, jquery в файл js или в head - в тег script, содержимое или контент,например, ссылки, css разместить в css файле; а вообще прочитайте основы html/css jquery

аватарка пользователя
2013-11-05
Tatiana

Спасибо за решение. Но не корректно работает в эксплоере и хроме:(((

Добавить комментарий