2015-11-26 4 views
-1

Так что я пытаюсь сделать, это изменение фиксированного фонового изображения 4 раза (один прокрутка - смена одного изображения), и после того, как четвертое изображение вверх, div с изображениями становится «относительным», поэтому Я могу прокрутить вниз до остальной части контента на веб-сайте (также, когда я прокручиваю вверх, изображения снова фиксируются и меняются в обратном порядке). я решил использовать этот код, но я не знаю, как заставить его работать на мои 5 свиткиПрокрутить вниз событие 5 раз

var lastScrollTop = 0; 
    $(window).scroll(function(event){ 
     var st = $(this).scrollTop(); 
     if (st > lastScrollTop){ 
      $("#backroundimage").addClass("backgroundimage1"); //down scroll code 
     } else { 
      $("#backroundimage").removeClass("backgroundimage1"); //up scroll code 
     } 
     lastScrollTop = st; 
    }); 

Хороший пример functionbility я пытаюсь достичь http://airnauts.com/, ведь прокрутки верхняя область выполнена, веб-сайт прокручивается до остальной части контента и наоборот при прокрутке вверх.

ответ

0

После повторного прочтения вопроса, я думаю, я понял, что вы хотите сделать (я не могу открыть ссылку вы дали).

Дело в том, что если вы хотите просто иметь верхнюю часть, которая меняет свой фон на свитке вы облако написать что-то вроде этого:

$(document).ready(function(){ 
    var numberofscroll = 0; 
    var lastScrollTop = 0; 
    $("#out").scroll(function(){ 
     var st = $(this).scrollTop(); 
     (st > lastScrollTop) ? numberofscroll++ : numberofscroll--; 
     if (numberofscroll<6){ 
      change_background(numberofscroll); 
     } 
    }); 
    lastScrollTop = st; 
}); 

Вот рабочий пример я сделал: https://jsfiddle.net/frqL0y6s/

Если вы хочу, чтобы этот «верхний раздел» исчез из-за последнего свитка, вы облака делаете:

+0

, это почти то, что я хотел, но когда я прокручиваю назад, изображение не появляется. Вот сайт, с которым я борюсь с http://prntscr.com/975xta. Верхнее изображение грузовика - это тот, который я хочу изменить, прокручивая вниз, 4 разных угла наклона грузовика, и после этого я прокручу дальше до остальной части содержимого на веб-сайте (и когда я вернусь наверх, изображения должны быть возвращены там). Извините, что я не могу получить его сам, но я довольно новичок в javascript, поэтому у меня есть некоторые проблемы с правильной логикой. Спасибо заранее, Денис. –

+0

@DeneaNovac Я забыл обновить значение lastScrollTop, так что «numberofscroll» работает правильно. Я обновил ответ с помощью нового jsfiddle. – jolmos

+0

Большое спасибо, ты закончил мою боль :) –

0

вы можете попробовать что-то вроде

var numberofscroll = 0; 

$(window).scroll(function(event){ 
     numberofscroll++; 
     if($(window).scrollTop() == $(window).height()){ // you reach to window bottom 
      if(numberofscroll == 1){ 
       // first time scroll 
      }else if(numberofscroll == 2){ 
      // second time scroll 
      }else ... so on till you reach to 5 

     }else{ 

     } 
}); 
+0

Спасибо, но что я делаю, добавляю к части «еще»? Я имею в виду, как мне подсчитывать свитки, когда я поднимаюсь на страницу? Если бы я прокрутил в общей сложности 50 раз (я имею в виду, что это переменная, я могу прокручивать даже 200 раз), как заставить div с изображениями фиксироваться? –

+0

@Denea Novac (st> lastScrollTop)? numberofscroll ++: numberofscroll-- – jolmos

+1

@jolmos, пожалуйста, укажите его в вашем типе комментариев @ и его имя –

0

Ваш код не может работать, потому что ваш вар lastScrollTop не Эгаль до ст, потому что она не определена. И больше эта первая переменная бесполезна. Просто определить одну переменные в цикле и сделать ваши различные испытания:

$(document).ready(function(){ 
    st = 0; 
    $(window).scroll(function(event){ 
    st = $(this).scrollTop(); 
    if(st > 200){ 
     test one; 
    }else if(st > 400){ 
     test two 
    }else{ 
     default 
    } 
    }) 
}) 
Смежные вопросы