Изменить текст на основе точного процента прокрутки?

Question

Я пытаюсь перебирать нумерованные вопросы на основе точного процента того, что просканировал пользователь. Моя цель - заставить это работать оперативно.

Я создал образец скрипку так, что вы видите, что я пытаюсь сделать ...

$(document).ready(
 

 
$(window).scroll(function(){ 
 

 
var progress = $(this).scrollTop()/$(document).height(); 
 

 
//calculate the percentage of the total window that the user has scrolled 
 

 
var questNum = progress * 4; 
 

 
//multiply that by the total number of questions, to get the corresponding question number 
 

 

 
if (questNum < 1) { 
 
\t $('#question').text('Hello?'); 
 
} 
 

 
else if (questNum < 2) { 
 
\t $('#question').text("It's me..."); 
 
} 
 

 
else if (questNum < 3) { 
 
\t $('#question').text('I was wondering if after all these years...'); 
 
} 
 

 
else if (questNum < 4) { 
 
     $('#question').text('You'd like to meet.'); 
 
} 
 
else{ 
 
     $('#question').text('*ring ring*'); 
 
}; 
 
}); 
 
);

*{ 
 
    height: 500px; 
 
    font-family: sans-serif; 
 
    font-size: 1em; 
 
    font-weight: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <span id="question" style="position: fixed">...</span> 
 
</div>

В теории это кажется, как она должна работать, но я так потеряно. Благодаря!

Answer 1

Некоторые вещи, чтобы исправить или изменить:

1. $(document).ready нуждается в функцию в качестве аргумента, так добавить function() { ... };
2. Одинарные кавычки должны быть экранированы с обратной косой черты, когда они происходят в одинарных кавычках: 'It\'s me...' и 'You\'d like to meet.'

3. Как вы не знаете, какой размер окна ваш код будет работать, устанавливая 500px как высота окна будет только имеют желаемый эффект на некоторых устройствах. Вместо этого установите высоту динамически:

   $('body').height($(document).height() + slackSpace); 
   

   ... где slackSpace должно быть количество пикселей, которые вы хотите иметь для прокрутки.

4. Пространство, которое вы оставляете для прокрутки (slackSpace) должно быть больше, если у вас больше вопросов, поэтому оно должно зависеть от количества вопросов. Вам нужно будет решить, сколько прокрутки пикселей нужно будет сделать, прежде чем переключиться на следующий вопрос. Таким образом, вы могли бы определить slackSpace следующим образом:

   var slackSpace = 5 * scrollPerQuestion; 
   

   ... где 5 бы количество вопросов. Это число должно управляться динамически (см. Следующую точку).

5. Удобнее управлять, если вы зададите свои вопросы в массиве. Тогда вам не нужны те if .. else if ... else if ..., но может просто выбрать текст вопроса по номеру:

   var questions = [ 
       'Hello?', 
       'It\'s me...', 
       'I was wondering if after all these years...', 
       'You\'d like to meet.', 
       '*ring ring*' 
   ]; 
   // ... once you have the questNum value: 
   $('#question').text(questions[questNum]); 
   

   Таким образом, вы также имеете доступ к ряду вопросов: questions.length.

6. Расчет неверного результата. Две части измеряют другой аспект: верхняя часть прокрутки дает верх (видимого) содержимого, а высота документа соответствует нижнему смещению всего содержимого. Разница между ними будет, по крайней мере, высотой окна, так что вы никогда не достигнете успеха на 100%. Вероятно, это даже сделает некоторые вопросы недостижимыми. Вместо того, чтобы использовать эту функцию:

   var progress = $(window).scrollTop()/slackSpace; 
   

   ... где slackSpace является значение, определенное в предыдущем пункте.

7. Некоторые браузеры сохраняют предыдущую позицию прокрутки, когда вы возвращаетесь на страницу или обновляете ее. Таким образом, вы захотите прокрутить страницу вверху всякий раз, когда загружается страница.

8. Документ имеет по умолчанию по умолчанию некоторые пиксели с каждой стороны. Это плохо влияет на расчет прогресса. Чтобы упростить задачу, установите для этого поля значение нуля и примените некоторый интервал к самому элементу вопроса, чтобы текст по-прежнему отображался на большом расстоянии от границ окна (также задайте элементу вопроса имя класса вместо встроенного стиля):

   body { 
       margin: 0px; 
   } 
   .question { 
       position: fixed; 
       padding: 10px; 
   } 
   

Вот код, применяя все эти идеи:

$(document).ready(function() { 
 
    var questions = [ 
 
     'Hello?', 
 
     'It\'s me...', 
 
     'I was wondering if after all these years...', 
 
     'You\'d like to meet.', 
 
     '*ring ring*' 
 
    ]; 
 

 
    // How many pixels to scroll before going to next question 
 
    var scrollPerQuestion = 50; 
 
    // Total space needed to scroll through all questions 
 
    var slackSpace = questions.length * scrollPerQuestion; 
 
    // Set appropriate document height for scrolling all questions: 
 
    $('body').height($(document).height() + slackSpace); 
 
    
 
    $(window).scroll(function(){ 
 
     // Calculate the percentage of the total window that the user has scrolled 
 
     var progress = $(window).scrollTop()/slackSpace; 
 
     // Convert progress into question number 
 
     var questNum = Math.floor(progress * questions.length); 
 
     // Make sure the question number does not pass the maximum 
 
     var questNum = Math.min(questNum, questions.length); 
 
     // Display corresponding question 
 
     $('#question').text(questions[questNum]); 
 
    }); 
 
    // Scroll to top on page load 
 
    $(window).scrollTop(0).trigger('scroll'); 
 
});

body { 
 
    font-family: sans-serif; 
 
    font-size: 1em; 
 
    font-weight: 100; 
 
    margin: 0px; 
 
} 
 
.question { 
 
    position: fixed; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span id="question" class="question">...</span> 
 
</div>

... это будет d o задание в фрагменте.

Answer 2

Я изменил свой код на

$ (документ) .ready (функция() {

и

$ ('# вопрос'). Текст («Вам понравится встречаться».)

Попробуйте это вместо этого. Он должен работать:

$(document).ready(function(){ //$(document).ready(

$(window).scroll(function(){ 

var progress = $(this).scrollTop()/$(document).height(); 

//calculate the percentage of the total window that the user has scrolled 

var questNum = progress * 4; 

//multiply that by the total number of questions, to get the corresponding question number 


if (questNum < 1) { 
    $('#question').text('Hello?'); 
} 

else if (questNum < 2) { 
    $('#question').text("It's me..."); 
} 

else if (questNum < 3) { 
    $('#question').text('I was wondering if after all these years...'); 
} 

else if (questNum < 4) { 
     $('#question').text('You\'d like to meet.');// $('#question').text('You'd like to meet.'); 
} 
else{ 
     $('#question').text('*ring ring*'); 
} 
}); 
});//);