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

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

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;
   

   其中CCD_ 6将是问题的数量。这个数字应该更好地动态管理（参见下一点）。

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>

它将完成片段中的工作。

我已经在上修改了您的代码

$（document）.ready（function）｛

和

$（'#question'）.text（'您想见一面。'）；

试试这个。它应该工作：

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