0

Проблема заключается в том, что на месте 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>

2
  • В файл style_1.css добавил в класс .sample-section-wrap строку width: 95.25%; Скролл в браузерах пропал, но проблема в мобильных устройствах осталась. 6 фев в 17:52
  • 1
    Ну это костыль =)
    – SiRanWeb
    6 фев в 18:57

1 ответ 1

0

У вас border и padding выходит за пределы экрана у секции. Добавьте к .sample-section свойство box-sizing: border-box;. Подробнее на MDN

1
  • Спасибо, все получилось. 6 фев в 19:18

Ваш ответ

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

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