Скроллинг страницы и плавающая боковая колонка
4244
8.6 из 10
Проголосовало: 10
Проголосовало: 10
- Скачать с сервера
- Скачать
На многих сайтах реализовано плавающее боковое меню. В сегодняшней статье я покажу, как это можно сделать. Причем плавать боковое меню будет лишь только при скроллинге страницы. Данный эффект можно реализовать, используя свойство css position со значением fixed, однако для лучшего эффекта воспользуемся возможностями jQuery.
HTML-разметка
Code
<header>
<!-- "шапка" сайта -->
</header>
<div id="wrap">
<div id="sidebar">
<!-- содержимое правой боковой колонки -->
</div>
<div id="container">
<!-- содержимое основного контейнера -->
</div>
</div> <!-- end wrap -->
<!-- "шапка" сайта -->
</header>
<div id="wrap">
<div id="sidebar">
<!-- содержимое правой боковой колонки -->
</div>
<div id="container">
<!-- содержимое основного контейнера -->
</div>
</div> <!-- end wrap -->
CSS
Code
header {
width: 100%;
height: 100px;
background: #d7d53f;
}
#wrap {
width: 600px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 200px;
background: #c2b3c6;
margin-left: -220px;
}
width: 100%;
height: 100px;
background: #d7d53f;
}
#wrap {
width: 600px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 200px;
background: #c2b3c6;
margin-left: -220px;
}
Ну а вот перед вами и сам скрипт. Вы можете добавить его к себе непосредственно в файл, вставив его между тегами script, или занесите его в ваш общий файл с javascript кодом, если таковой имеется. Все предельно просто и я думаю, вам не составит никакого труда, при желании, реализовать плавающий боковой блок на своем сайте.
Code
$(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'});
}
});
})
//ф-я 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'});
}
});
})
всё!
Автор публикации: Загрузка
Загрузка
- Всего комментариев: 4
0
|
зачем усложнять?
|
0
|
Конечно своровано но спасибо
Осталось разобраться как зделать чтоб он ширину нетрогал |
0
|
Бред, TRANE73 такое делал ток горизонтальное меню было.
|
0
|
и что?
|
- Оставить комментарий:
Меню сайта
Категории
Мини-чат
Последние комментарии
Это моя работа, которая велась давольно таки давно 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Последние темы
Опрос
Статистика
| 0 онлайн |
0 наших |
0 чужих |
0
Сегодня были
Топ пользователей:
| |  |  | |  |  |
 |  |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2026 г.
- Design by Вовчик Администратор:)