Хочу разработать сайт с вертикальным меню в левой стороне. Использую bootstrap, owl carousel и fullpahe.js что бы добиться желаемого результата. Шапке было задано position: fixed !important; и при обычном скроле, до подключение плагина fullpage.js все работало отлично, но после подключения шапка остается в верху и вместе со скролом вниз не идет.
<body>
<div class="container-fluid" id="fullpage">
<div class="row section">
<header class="col-md-2 header">
<nav class="sidebar-sticky bg-dark navbar-dark navbar-expand-md menu">
<a href="#" class="logo navbar-brand">
<img src="image/logo.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto flex-column">
<li class="nav-item active">
<a href="" class="nav-link">О нас</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Проекты</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Команда</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Отзывы</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Контакты</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- end header -->
<main class="col-md-12 carousel-1">
<div class="owl-carousel">
<div class="slide_1">
<h1>test</h1>
</div>
<div class="slide_1">
<h1>test</h1>
</div>
<div class="slide_1">
<h1>test</h1>
</div>
</div>
</main>
</div>
<section class="section">
<div class="row">
<div class="col-lg-12">
<h1 class="test">
первый блок
</h1>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-lg-12">
<h1 class="test">
второй блок
</h1>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-lg-12">
<h1 class="test">
третий блок
</h1>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-lg-12">
<h1 class="test">
четвертый блок
</h1>
</div>
</div>
</section>
</div>
<code lang="css">
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
overflow: hidden !important;
height: 100%;
}
header {
padding: 0 !important;
margin: 0 !important;
z-index: 1;
background: none !important;
position: absolute !important;
min-height: 100vh !important;
position: fixed !important;
}
main {
z-index: 0;
position: relative !important;
}
.section {
min-height: 100vh;
background-color: #000;
padding: 0 !important;
margin: 0 !important;
z-index: 0;
}
#fullpage {
padding: 0;
margin:0;
}
.menu {
min-height: 100vh !important;
}
.logo img {
width: auto;
height: auto;
}
.carousel-1 {
padding: 0;
margin: 0;
}
.slide_1 {
background: url(../image/logo.png);
width: 100%;
height: 100vh;
}
.test {
color: #fff;
}<code lang="javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
items: 1,
loop: true,
autoplay : true,
autoplayTimeout : 5000,
smartSpeed:500,
});
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true,
keyboardScrolling: true,
padding: '0',
responsiveWidth: 0,
responsiveHeight: 0,
verticalCentered: false,
cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},
loopBottom:true,
});
});
</code>
</code>
Простой
