Fixed/sticky sidebar with flexbox
354
20 декабря 2017, 20:03
Уже много гуглил, но так и не смог найти ответа для себя, где-то работает, где-то - нет. Не могу понять как сочетаются position: fixed и display: flex. Некоторые говорят обернуть, но не получается в этом примере. Так вот, моя проблема: хочу сделать как в этом примере, только через flexbox. Оно должно работать по идее и без этого (другой) примера, но я добавил его уже от безысходности. Контент по идее должен отодвигаться, а sidebar всплывать при нажатии на OPEN. Но когда я задаю position:fixed контент даже не отображается. Остальные вопросы: 1.) Есть ли смысл sidebar вообще делать на flexbox? 2.) Так как я только начинаю писать на JS, то можно ли как-то в JS коде, в stickyFunction(), третья строка, указать: if (window.pageYOffset >= sticky && function openNav() РАБОТАЕТ (укажите код как это написать))[![
var x = document.getElementById("mySidenav");
function openNav() {
document.getElementById("wrapper").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
if (x.style.display == "none" && x.style.width == "0") {
x.style.display = "flex";
x.style.width = "250px";
}
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("wrapper").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
function stickyFunction() {
var navbar = document.getElementById("mySidenav");
var sticky = navbar.offsetTop;
if (window.pageYOffset >= sticky && (x.style.display != "none")) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}.wrapper {
min-height: 100%;
}
.sidenav {
flex-direction: column;
min-height: 100%;
padding-top: 60px;
background-color: #111;
transition: .5s;
width: 0;
display: none;
}
.sidenav a {
font-size: 20px;
padding: 8px 8px 8px 32px;
color: white;
transition: .3s;
}
.closebtn {
position: absolute;
right: 25px;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sticky {
position: fixed;
}<body onscroll="stickyFunction()">
<!-- скролл -->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> /* закрытие */
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="wrapper">
<!-- обёртка, для того, чтобы контент отодвигался -->
<!-- это не важно -->
<header class="header">
<div class="topnav">
<a href="#" class="hrefs" id="active">Home</a>
<a href="#" class="hrefs">News</a>
<a href="#" class="hrefs">Contacts</a>
<a href="#" class="hrefs">About</a>
<a href="javascript:void(0);" class="icon" onclick="iconMenu()">☰</a>
</div>
</header>
</br>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<!-- открытие -->]3]3
Буду благодарен за помощь!
Answer 1
Чтобы сделать подобный эффект, пробуем вот так:
$('.btn').click(function() {
$('nav').toggleClass('nav-open')
});
$(".menu").click(function(){
$(this).toggleClass("open");
$('nav').toggleClass('nav-open');
});* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
body {
display: flex;
flex-flow: row wrap;
background: #EFF9F0;
font-family: 'Cuprum', sans-serif;
font-weight: 300;
}
h3 {
color: #747474;
font-weight: 700;
margin: 10px 0 0 0;
display: inline-block;
font-size: 24px;
text-transform: uppercase;
}
h3:after {
display: block;
content: "";
height: 2px;
width: 50px;
background: #FE5D26;
margin-bottom: 20px;
}
nav {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
height: 100%;
background: #1D1A31;
width: 0;
transform: translateX(-200%);
transition: cubic-bezier(.88,.22,0,.9) 0.3s;
overflow: hidden;
}
nav a {
display: flex;
align-items: center;
color: #fff;
text-decoration: none;
margin-bottom: 20px;
font-weight: 100;
font-size: 24px;
}
nav a:before {
display: inline-block;
content: "";
height: 2px;
width: 1px;
background: #fff;
flex: 1;
margin-right: 5px;
}
nav a:hover:before {
display: block;
height: 24px;
transition: 300ms;
}
.nav-open {
width: 300px;
transform: translate(0);
transition: cubic-bezier(.88,.22,0,.9) 0.3s;
}
.content {
display: block;
overflow: auto;
flex: 1;
width: 100%;
color: #333;
}
.wrapper {
margin: auto;
}
article {
background: #fff;
padding: 20px;
margin-bottom: 1px;
}
.fitured-image {
display: block;
width:100%;
border-bottom: 2px solid #6B4D57;
position: relative;
height: 500px;
overflow: hidden;
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(http://pexetothemes.com/demos/story_wp/wp-content/uploads/2014/05/2947294095_992a7fd836_o-copy1.jpg) ;
}
.fitured-image-caption {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
left: 50px;
bottom: 30%;
}
.fitured-image-caption p {
margin: 0;
padding: 0;
font-size: 18px;
line-height: .9;
}
.fitured-image-caption li {
color: #fff;
margin-bottom: 2px
}
.fitured-image-caption li:nth-of-type(2) {
border-top: 2px solid #FE5D26;
padding: -12px;
font-size: 42px;
}
.fitured-image img {
width: 100%;
}
.menu {
width: 40px;
height: 50px;
position: fixed;
top: 25px;
left: 5%;
z-index: 9999;
}
.menu:hover {
cursor: pointer;
}
.menu.open .menu-item {
background: #fff;
}
.menu.open .menu-item:first-child {
transform: rotate(45deg);
transform-origin: 10px 50%;
}
.menu.open .menu-item:nth-child(2) {
opacity: 0;
}
.menu.open .menu-item:nth-child(3) {
transform: rotate(-45deg);
transform-origin: 8px 50%;
}
.menu-item {
transition-property: all;
transition-duration: 0.2s;
display: block;
width: 40px;
height: 3px;
margin: 0 0 5px;
background: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<span class="menu-item"></span>
<span class="menu-item"></span>
<span class="menu-item"></span>
</div>
<nav>
<a href="#close">Option 1</a>
<a href="#close">Option 2</a>
<a href="#close">Option 3</a>
<a href="#close">Option 4</a>
<a href="#close">Option 5</a>
</nav>
<div class="content">
<div class="wrapper">
<div class="fitured-image">
<ul class="fitured-image-caption ">
<li>
<p>About me
<li>The developer
</ul>
</div>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</article>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </article>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </article>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </article>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </article>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </article>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </article>
<article>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </article>
</div>
</div>Это концепция, чтобы понять саму разметку. После понимания какой контейнер в чем находится, будет проще реализовать.
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
-
20:52
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47546 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30490 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23620 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9952 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
© "hostciti.net" 15.11.2024 | 09:50