Простой jQuery Parallax

Question

Простой jQuery Parallax

0

Мне нужна помощь, отлаживающая этот jQuery, в котором я манипулирую верхним краем элемента в контейнере с фиксированным размером и переполнением, установленным в скрытое, чтобы я мог создать эффект параллакса. Параллакс работает, но если вы прокрутите вниз даже один пиксель, а затем перезагрузите страницу, он сломается. Может ли кто-нибудь помочь мне исправить эту проблему? Вот код.

//Parallax for Header
$(window).on("load", function() {
    var startingScrollTop = parseInt($(window).scrollTop());
    console.log(startingScrollTop);
    var startingElementTop = parseInt($headerText.css("margin-top"));
    console.log(startingElementTop);
    $(window).on("scroll", function() {
        var currentScrollTop = parseInt($(window).scrollTop());
        console.log(currentScrollTop);
        if(currentScrollTop > startingScrollTop) {
            var scrollDistance = currentScrollTop - startingScrollTop;
            console.log(scrollDistance);
            var parallaxDistance = scrollDistance / 2;
            console.log(parallaxDistance);
            var newElementMarginTop = startingElementTop + parallaxDistance;
            console.log(newElementMarginTop);
            $headerText.css("margin-top", newElementMarginTop + "px");
        } else if(currentScrollTop <= "0") {
            $headerText.css("margin-top", "0px");
        }
    });
});

Спасибо вам за помощь.

Nick Passaro 12 май 2014, в 19:59

Источник

0

Вам нужно определить текущую позицию, прежде чем запустить прокрутку. Вот почему это ломается. Вам нужно добавить условия, которые проверяют, где он находится в данный момент. Поскольку вы используете фиксированную позицию, она будет перемещаться вместе с полосой прокрутки, но ее верхняя позиция все еще меняется. Если вы сначала не проверите эту верхнюю позицию, а затем напишите свои операторы if, если top> 0, сделайте это, а затем ваш оператор else.
Cam 12 май 2014, в 17:09
0

Также была бы полезна скрипка для этого.
Cam 12 май 2014, в 17:10
0

Я на самом деле думаю, что вы должны просто сделать свой startingScrollTop = 0 . Когда вы перезагружаете страницу, браузер автоматически прокручивает ваше последнее местоположение по умолчанию и заставляет ваше начальное местоположение отражать это. Если вы прокручивали всю страницу вниз, то после обновления вы вообще не получите никакой анимации.
Kyle 12 май 2014, в 17:14

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

parallax

reload

2 ответа

Ещё вопросы

Вам нужно определить текущую позицию, прежде чем запустить прокрутку. Вот почему это ломается. Вам нужно добавить условия, которые проверяют, где он находится в данный момент. Поскольку вы используете фиксированную позицию, она будет перемещаться вместе с полосой прокрутки, но ее верхняя позиция все еще меняется. Если вы сначала не проверите эту верхнюю позицию, а затем напишите свои операторы if, если top> 0, сделайте это, а затем ваш оператор else.
Также была бы полезна скрипка для этого.
Я на самом деле думаю, что вы должны просто сделать свой startingScrollTop = 0 . Когда вы перезагружаете страницу, браузер автоматически прокручивает ваше последнее местоположение по умолчанию и заставляет ваше начальное местоположение отражать это. Если вы прокручивали всю страницу вниз, то после обновления вы вообще не получите никакой анимации.

Nick Passaro · Answer 1 · 2014-05-12T18-25-00.000Z

Еще раз, неважно, я снял его:

для всех желающих:

//Parallax for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  //Re-use this on scroll
  function parallaxify() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    if(currentScrollTop > startingScrollTop) {
      var scrollDistance = currentScrollTop - startingScrollTop;
      console.log(scrollDistance);
      var parallaxDistance = scrollDistance / 2;
      console.log(parallaxDistance);
      var newElementMarginTop = startingElementTop + parallaxDistance;
      console.log(newElementMarginTop);
      $headerText.css("margin-top", newElementMarginTop + "px");
    } else if(currentScrollTop <= "0") {
      $headerText.css("margin-top", "0px");
    }
  }
  parallaxify();
  $(window).on("scroll", function() {
    //Put the re-used code here
    parallaxify();
  });
});

Nick Passaro · Answer 2 · 2014-05-12T16-47-00.000Z

Я понял это, но как я могу это упростить?

//Parallax for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  //Re-use this on scroll
  var currentScrollTop = parseInt($(window).scrollTop());
  console.log(currentScrollTop);
  if(currentScrollTop > startingScrollTop) {
    var scrollDistance = currentScrollTop - startingScrollTop;
    console.log(scrollDistance);
    var parallaxDistance = scrollDistance / 2;
    console.log(parallaxDistance);
    var newElementMarginTop = startingElementTop + parallaxDistance;
    console.log(newElementMarginTop);
    $headerText.css("margin-top", newElementMarginTop + "px");
  } else if(currentScrollTop <= "0") {
    $headerText.css("margin-top", "0px");
  }
  //Put the re-used code here
  $(window).on("scroll", function() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    if(currentScrollTop > startingScrollTop) {
      var scrollDistance = currentScrollTop - startingScrollTop;
      console.log(scrollDistance);
      var parallaxDistance = scrollDistance / 2;
      console.log(parallaxDistance);
      var newElementMarginTop = startingElementTop + parallaxDistance;
      console.log(newElementMarginTop);
      $headerText.css("margin-top", newElementMarginTop + "px");
    } else if(currentScrollTop <= "0") {
      $headerText.css("margin-top", "0px");
    }
  });
});

Могу ли я перевернуть повторно используемый код в функцию, которую я могу запускать при загрузке, прокрутке или на любом другом обработчике?