0

Пробую создать страницу с parallax-эффектом, что бы сверху находилась панель навигации и логотип, fixed. Панель закрепил, но вот проблема с parallax-эфектом (не работает), и скрипт не создает класс .scrolled Подскажите, что я делаю не так?

var $headline = $('.headline'),
  $inner = $('.inner'),
  $nav = $('nav'),
  navHeight = 75;

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop(),
    headlineHeight = $headline.outerHeight() - navHeight,
    navOffset = $nav.offset().top;

  $headline.css({
    'opacity': (1 - scrollTop / headlineHeight)
  });
  $inner.children().css({
    'transform': 'translateY(' + scrollTop * 0.4 + 'px)'
  });
  if (navOffset > headlineHeight) {
    $nav.addClass('scrolled');
  } else {
    $nav.removeClass('scrolled');
  }
});
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  color: #333;
}

header {
  background: #111;
}

.headline {
  position: relative;
  height: 400px;
  color: #fff;
  text-align: center;
  background: url("https://farm9.staticflickr.com/8088/8363737128_b76782c7a2_b.jpg") no-repeat center center;
  background-size: cover;
}

.headline:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 17, 17, 0.5);
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 10;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: fade-in 0.75s 0.25s ease-in forwards;
  animation: fade-in 0.75s 0.25s ease-in forwards;
}

.inner h1 {
  margin: 0;
  font-size: 4em;
  line-height: 1.2em;
}

.inner p {
  margin: 0;
  font-size: 1.4em;
  font-style: italic;
  font-family: serif;
}

nav {
  position: fixed;
  width: 100%;
  z-index: 10;
}

nav.scrolled {
  background: rgba(17, 17, 17, 0.9);
}

nav ul {
  float: right;
  list-style: none;
  padding: 25px;
  margin: 0;
}

nav li {
  float: left;
}

nav a {
  font-size: 0.9em;
  color: #fff;
  text-decoration: none;
  margin: 5px 0 0 20px;
  display: block;
}

nav a:hover {
  color: #ededed;
}

.logo {
  height: 75px;
  float: left;
}

.logo:before,
.logo:after {
  position: absolute;
  font-size: 7em;
  font-weight: 300;
  line-height: 0;
  color: #fff;
  top: 25px;
}

.logo:before {
  content: "»";
  left: 20px;
}

.logo:after {
  content: "«";
  left: 34px;
}

section {
  width: 100%;
  margin: 25px auto;
  padding: 20px;
  max-width: 800px;
  font-size: 1.2em;
  line-height: 1.6em;
  box-sizing: border-box;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test doc</title>
  <link rel="stylesheet" href="style_1.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="parallax.js"></script>
</head>

<body>
  <nav>
    <div class="logo"></div>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </nav>
  <header>
    <div class="headline">
      <div class="inner">
        <h1>Тестовая страница</h1>
        <p>Скроль вниз</p>
      </div>
    </div>
  </header>
  <section>
    <h2>Привет</h2>
    <p>Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница. Это тестовая страница.Это тестовая страница.Это тестовая страница.Это
      тестовая страница.Это тестовая страница.
    </p>
    <h2>Это тестовая страница.</h2>
    <p>Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая
      страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.</p>
    <p>Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая
      страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.</p>
    <p>Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.Это тестовая страница.</p>
  </section>
</body>

</html>

1
  • Решил проблему, переместив строку в HTML-коде <script src="parallax.js"></script> вниз страницы, между </body> и </html>. Такая мелочь, а из-за неверного расположения вызова скрипта рушится весь код... Вопрос закрыт. 29 янв в 19:44

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.