Проблема заключается в том, что на месте header с background образуется пустое пространство, и так же увеличивается и основной блок страницы, выходя за рамки браузера c образованием скролла по ширине. Если вставим в body {overflow-x: hidden;}, то визуально проблема исчезает, но на мобильных устройствах это не работает. Не пойму, в чем дело. Никак не могу отловить превышение ширины блока. Верстаю адаптивную страницу.
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://ecvdo.ru/assets/images/report/v-ochkah-studentka.jpg") no-repeat 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;
}
.sample-section-wrap {
position: relative;
background-color: white;
margin-left: 0;
}
.sample-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
padding: 25px;
border: 2px solid rgb(75, 75, 75);
background-color: white;
}
.sample-section-one {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
height: 50%;
margin: 0px;
}
.sample-section-one a {
line-height: 150%;
text-decoration: none;
text-align: center;
vertical-align: baseline;
}
.sample-section-one a:visited {
color: #4B0082;
}
.sample-section-one a:link {
color: #4B0082;
}
.sample-section-one a:active {
color: #8A2BE2;
}
.sample-section-one a:hover {
color: #8A2BE2;
}
@-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.6.3/jquery.min.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 class="sample-section-wrap">
<div class="sample-section">
<div class="sample-section-one">
<a href="#">Тест</a><br>
<a href="#">Тест</a><br>
<a href="#">Тест тест</a><br>
<a href="#">Тест</a><br>
<a href="#">Тесттест тест</a><br>
<a href="#">Тест тесттесттест</a><br>
<a href="#">Тест</a>
</div>
<div class="sample-section-one">
<a href="#">Тест тесттест</a><br>
<a href="#">Тесттест</a><br>
<a href="#">Тест</a><br>
<a href="#">Тест тест тесттесттесттест тесттест</a><br>
<a href="#">Тест</a><br>
<a href="#">Тест</a><br>
<a href="#">Тест тест тест</a>
</div>
</div>
</section>
</body>
<script src="parallax.js"></script>
</html>