$(document).ready(function() {
$('.sidebar_icon, .sidebar_bg').click(function(e){
e.preventDefault();
var tdata = {
".sidebar": "sidebar_toggled",
".sidebar_bg": "sidebar_bg_toggle",
".sidebar_icon-close": "icon-close-active",
".wrapper": "wrapper_push",
"body": "site-cache"
};
var remove = $(this).hasClass("sidebar_bg");
$.each(tdata, function(sel, cls){
remove ? $(sel).removeClass(cls) : $(sel).toggleClass(cls);
});
});
});
<div class="sidebar_icon"></div>
<div class="sidebar">1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> </div>
<body>1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> </body>
.sidebar_icon {
float: right;
width: 30px;
height: 30px;
margin: 20px;
position: relative;
cursor: pointer;
background: #000;
}
.sidebar {
position: absolute;
top: 0;
left: -240px;
width: 240px;
}
.sidebar_toggled {
position: fixed;
left: 0;
width: 240px;
background: #ccc;
overflow: hidden;
}
рони,
у body есть скроллбар. Нужно, чтобы при открытии блока, этот скроллбар начинал прокручивать этот самый блок, а не body.
Я хочу добавить сообщение, как это сделал
Dilettante_Pro, чтобы была кнопка "Посмотреть", но у меня почему-то не получается.
Dilettante_Pro,
в диве возможно переполнение по вертикали, но зависеть это будет от высоты экрана. У body скроллбар всегда активен.