0

Хочу сделать скролинг страницы, первый frame «уезжает» вверх, а второй встает на top 0, а вот третий не получается.

Как это исправить?

var $document = $(document),
  $element1 = $('.frame-1'),
  $element2 = $('.frame-2'),
  $element3 = $('.frame-3');

$(window).scroll(function() {
  if ($(this).scrollTop() >= 1) {
    $element1.css("top", "-962px");
    $element2.css("top", "0px");
    $element3.css("top", "962px");
  } else if ($(this).scrollTop() >= 962) {
    $element1.css("top", "-1924px");
    $element2.css("top", "-962px");
    $element3.css("top", "0px");
  } else {
    $element1.css("top", "0px");
    $element2.css("top", "962px");
    $element3.css("top", "1924px");
  }
});
.wrapper {
  position: relative;
  height: 400px;
}
.frame-1 {
  top: 0px;
  background: #c5d8c5;
  width: 100%;
  height: 962px;
  transition: all 3s ease;
}
.frame-2 {
  width: 100%;
  top: 962px;
  background: #99ff99;
  height: 962px;
  position: absolute;
  transition: all 3s ease;
}
.frame-3 {
  width: 100%;
  top: 1924px;
  background: #ff0000;
  height: 962px;
  position: absolute;
  transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="frame-1">
    <!-- Content here -->
  </div>
  <div class="frame-2">
    <!-- Content here -->
  </div>
  <div class="frame-3">
    <!-- Content here -->
  </div>
</div>

2

2 ответа 2

1

Дело в том, что проверку позиционирования Вы делаете для window, а смещаете стилями блоки $elemen1, $element2, $element3, а это не одно и тоже, если бы Вы сделали смещение через $(window).scrollTop(962). Т.е., что я хочу сказать, после смены позиции блоков, скажем, при первом скролле, значение $(window).scrollTop() на самом деле не будет равно 962px и это можно увидеть через отладчик. Поэтому либо делайте проверку не для $(window).scrollTop(), а для, например, $element1.css('top'), либо меняйте позицию не для блоков, а для window, причем блоки условий необходимо поменять местами, т.к. проверка if ($(this).scrollTop() >= 962) не выполнится, ведь у Вас выше есть проверка if ($(this).scrollTop() >= 1) (согласитесь, все что >962 будет >1), например:

$(window).scroll(function() {
    if($(this).scrollTop() > 1924) {
        $(this).scrollTop(0);
    }
    if($(this).scrollTop() > 962) {
        $(this).scrollTop(1924);    
    }
    if($(this).scrollTop() > 0) {
        $(this).scrollTop(962);
    }
} /* правда, все скроллится если скроллить вниз */
2
  • если вам не трудно немогли бы вы скинуть ваш пример на jsfiddle 12 сен 2015 в 17:32
  • Я извиняюсь, не правильный код привел. Вот ссылка на рабочий вариант (повторюсь, только скролл вниз работает и нет анимации): jsfiddle.net/rkq5z62j
    – R. Mameday
    12 сен 2015 в 18:42
0

Ну так да.. Изначально неверный подход выбрали. Возьмите какое-нибудь готовое решение, например, fullpage.js. думаю, это то, что вам нужно

2
  • что то я там не разобрался совсем, большой скрипт, а разве не как не исправить мой код? 9 сен 2015 в 17:27
  • Что там сложного?. Пожключаете его на страницу после jquery. Вашим фремам добавляет класс .section, а к wrapper в скрипта своём подключаете $('.wrapper').fullpage(); 9 сен 2015 в 18:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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