@Evergarden77

Как сделать. что бы шапка сайта скролилась вместе со страницей, если использую fullPage.js?

Хочу разработать сайт с вертикальным меню в левой стороне. Использую 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>
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
fergussawyer
@fergussawyer
Front-End
position: fixed; для меню
У вас шапка находится в общем контейнере с id="fullpage" конечно не будет работать. Шапку вытащите из id="fullpage"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
02 апр. 2020, в 21:27
600 руб./за проект
02 апр. 2020, в 21:15
3000 руб./за проект
02 апр. 2020, в 21:11
8500 руб./за проект