Фиксация сайдбара при прокрутке
Здравствуйте! Помогите, пожалуйста. Нужно, чтобы сайдбар (#sidebar) фиксировался при прокрутке, когда сверху остаётся 10 пикселей.
http://jsfiddle.net/86w9vboc/10/ |
<style>
header {
width: 100%;
background: #D8E3AB no-repeat 5% 50%;
height: 115px;
position: relative;
}
#sidebar { /* Левая колонка */
position:relative;
float: left;
border: 1px solid #333;
width: 230px;
padding: 20px;
margin: 10px 10px 20px 5px;
background: #fff8dd;
}
#content { /* Правая колонка */
margin: 10px 5px 20px 290px;
padding: 20px;
border: 1px solid #333;
background: #fff8dd;
min-height: 423px;
}
</style>
<header></header>
<div id="sidebar">
<b>Меню</b>
<ul>
<li><a href="/"><img src="admin/news.png" height="40" width="110" class="animate1" title="" alt="Новости"></a></li>
<li><a href="/о-компании"><img src="admin/about.png" height="40" width="140" class="animate1" title="" alt="О компании"></a></li>
<li><a href="/тарифы"><img src="admin/tariffs.png" height="40" width="110" class="animate1" title="" alt="Тарифы"></a></li>
<li><a href="/контакты"><img src="admin/connect.png" height="40" width="120" class="animate1" title="" alt="Контакты"></a></li>
</ul>
<b>Погода</b>
<p><center><table>
<tr><td>
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://nst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">
<div id="gsInformerID-gwCH5K54g36hHg" class="gsInformer" style="width:210px;height:116px">
<div class="gsIContent">
<div id="cityLink">
<a href="https://www.gismeteo.ru/weather-yelizovo-4908/" target="_blank">Погода в Елизово</a>
</div>
<div class="gsLinks">
<table>
<tr>
<td>
<div class="leftCol">
<a href="https://www.gismeteo.ru/" target="_blank">
<img alt="Gismeteo" title="Gismeteo" src="https://nst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
<span>Gismeteo</span>
</a>
</div>
<div class="rightCol">
<a href="https://www.gismeteo.ru/weather-yelizovo-4908/2-weeks/" target="_blank">Прогноз на 2 недели</a>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=gwCH5K54g36hHg" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</td>
</tr>
</table></center>
</div>
<div id="content"></div>
<script>
var roof = +getComputedStyle(document.querySelector('header')).height.replace('px','') + 10;
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
if(scrolled > roof) sidebar.style.top = scrolled - roof + "px";
}
</script>
|
скролл фиксация меню
webmasterhtml,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
header {
width: 100%;
background: #D8E3AB no-repeat 5% 50%;
height: 115px;
position: relative;
}
#sidebar { /* Левая колонка */
position:relative;
float: left;
border: 1px solid #333;
width: 230px;
padding: 20px;
margin: 10px 10px 20px 5px;
background: #fff8dd;
}
#content { /* Правая колонка */
margin: 10px 5px 20px 290px;
padding: 20px;
border: 1px solid #333;
background: #fff8dd;
min-height: 423px;
}
#sidebar.fix{
position: fixed;
top: 0;
}
</style>
</head>
<body>
<header></header>
<div id="sidebar">
<b>Меню</b>
<ul>
<li><a href="/"><img src="admin/news.png" height="40" width="110" class="animate1" title="" alt="Новости"></a></li>
<li><a href="/о-компании"><img src="admin/about.png" height="40" width="140" class="animate1" title="" alt="О компании"></a></li>
<li><a href="/тарифы"><img src="admin/tariffs.png" height="40" width="110" class="animate1" title="" alt="Тарифы"></a></li>
<li><a href="/контакты"><img src="admin/connect.png" height="40" width="120" class="animate1" title="" alt="Контакты"></a></li>
</ul>
<b>Погода</b>
<p><center><table>
<tr><td>
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://nst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">
<div id="gsInformerID-gwCH5K54g36hHg" class="gsInformer" style="width:210px;height:116px">
<div class="gsIContent">
<div id="cityLink">
<a href="https://www.gismeteo.ru/weather-yelizovo-4908/" target="_blank">Погода в Елизово</a>
</div>
<div class="gsLinks">
<table>
<tr>
<td>
<div class="leftCol">
<a href="https://www.gismeteo.ru/" target="_blank">
<img alt="Gismeteo" title="Gismeteo" src="https://nst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
<span>Gismeteo</span>
</a>
</div>
<div class="rightCol">
<a href="https://www.gismeteo.ru/weather-yelizovo-4908/2-weeks/" target="_blank">Прогноз на 2 недели</a>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=gwCH5K54g36hHg" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</td>
</tr>
</table></center>
</div>
<div id="content"></div>
<script>
var sidebar = document.querySelector('#sidebar');
window.onscroll = function() {
var roof = document.querySelector('header').getBoundingClientRect().bottom;
roof < 0 ? sidebar.classList.add("fix") : sidebar.classList.remove("fix");
}
</script>
</body>
</html>
|
рони,
Да, fixed поспокойнее при прокрутке колесом |
webmasterhtml,
можно же обойтись без js, просто добавьте в сайдбар position: sticky; top: 10px; Явно экономит больше места в html |
madeas,
способ отличный, один минус: в IE не сработает |
j0hnik,
так-то да, к сожалению. Но если верить гугл тренду, то IE использует незначительное количество пользователей. Ими можно и пожертвовать)) |
madeas,
А пример в студию можно? На основе макетов в предыдущих примерах |
Dilettante_Pro, на основе вашего макета
<style>
header {
width: 100%;
background: #D8E3AB no-repeat 5% 50%;
height: 115px;
position: relative;
}
#sidebar { /* Левая колонка */
position:relative;
float: left;
border: 1px solid #333;
width: 230px;
padding: 20px;
margin: 10px 10px 20px 5px;
background: #fff8dd;
/* добаавляем */
position: sticky;
top: 10px;
}
#content { /* Правая колонка */
margin: 10px 5px 20px 290px;
padding: 20px;
border: 1px solid #333;
background: #fff8dd;
min-height: 823px;
}
</style>
<header></header>
<div id="sidebar">
<b>Меню</b>
<ul>
<li><a href="/"><img src="admin/news.png" height="40" width="110" class="animate1" title="" alt="Новости"></a></li>
<li><a href="/о-компании"><img src="admin/about.png" height="40" width="140" class="animate1" title="" alt="О компании"></a></li>
<li><a href="/тарифы"><img src="admin/tariffs.png" height="40" width="110" class="animate1" title="" alt="Тарифы"></a></li>
<li><a href="/контакты"><img src="admin/connect.png" height="40" width="120" class="animate1" title="" alt="Контакты"></a></li>
</ul>
<b>Погода</b>
<p><center><table>
<tr><td>
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://nst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">
<div id="gsInformerID-gwCH5K54g36hHg" class="gsInformer" style="width:210px;height:116px">
<div class="gsIContent">
<div id="cityLink">
<a href="https://www.gismeteo.ru/weather-yelizovo-4908/" target="_blank">Погода в Елизово</a>
</div>
<div class="gsLinks">
<table>
<tr>
<td>
<div class="leftCol">
<a href="https://www.gismeteo.ru/" target="_blank">
<img alt="Gismeteo" title="Gismeteo" src="https://nst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
<span>Gismeteo</span>
</a>
</div>
<div class="rightCol">
<a href="https://www.gismeteo.ru/weather-yelizovo-4908/2-weeks/" target="_blank">Прогноз на 2 недели</a>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=gwCH5K54g36hHg" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</td>
</tr>
</table></center>
</div>
<div id="content"></div>
|
j0hnik,
Таки он не так себя ведет, как в примерах рони или моем. |
| Часовой пояс GMT +3, время: 16:37. |