根据确切的滚动百分比更改文本？

Question

我正在尝试根据用户滚动内容的确切百分比循环浏览编号问题。我的目标是让它响应迅速地工作。

我创建了一个示例 fiddle 以便您了解我正在尝试做什么...

$(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.');
}
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

我已经在

上修改了你的代码

$(document).ready(function(){

和

$('#question').text('You\'d like to meet.');

试试这个。它应该有效：

$(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*');
}
});
});//);

Answer 2

一些要更正或更改的内容：

$(document).ready 需要一个函数作为参数，所以添加 function() { ... };
单引号出现在单引号字符串中时需要用反斜杠转义：'It\'s me...'和'You\'d like to meet.'
因为您不知道您的代码运行的 window 尺寸，将 500px 设置为 window 高度将只有在某些设备上的预期效果。相反，动态设置高度：
```
$('body').height($(document).height() + slackSpace);
```
... 其中 slackSpace 应该是您希望可用于滚动的像素数。
你留给滚动的space(slackSpace)应该在你有更多问题时更大，所以它应该依赖于问题的数量。在切换到下一个问题之前，您需要决定需要滚动多少像素。因此，您可以定义 slackSpace 如下：
```
var slackSpace = 5 * scrollPerQuestion;
```
...其中 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.

进度计算不正确。这两个部分测量不同的方面：滚动顶部给出（可见）内容的 top，而文档高度对应于 bottom 偏移量所有内容。两者之间的差异至少是 window 高度，所以你永远不会像那样获得 100% 的进步。它甚至可能会使某些问题无法解决。而是使用这个：
```
var progress = $(window).scrollTop() / slackSpace;
```
... 其中slackSpace是上一点定义的值。
有些浏览器会在您返回页面或刷新页面时保留之前的滚动位置。因此，您需要在页面加载时将页面滚动到顶部。
文档每边都有一些像素的默认边距。这严重影响了进度的计算。为了使事情变得更容易，将边距设置为零并对问题元素本身应用一些间距，以便文本仍然出现在 window 边界的合适距离处（同时给问题元素一个 class 名称而不是内联样式）：
```
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>

...它将完成代码段中的工作。

根据确切的滚动百分比更改文本？

Change text based on exact scroll percentage?

javascript

jquery

scroll

percentage