正確なスクロールパーセンテージに基づいてテキストを変更しますか？

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. 単一引用符は、彼らは、単一引用符で囲まれた文字列で発生したときにバックスラッシュでエスケープする必要があります：あなたは、ウィンドウの高さとして500pxを設定し、あなたのコードが実行されるウィンドウサイズに知っていないと'It\'s me...'と'You\'d like to meet.'

3. ますいくつかのデバイスでのみ望ましい効果があります。代わりに、動的に高さを設定：slackSpaceはあなたがスクロールするために利用可能にしたいピクセル数をあるべき

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

   ...。

4. さらに多くの質問がある場合、スクロールするために残すスペース（slackSpace）は、質問の数に応じて大きくする必要があります。次の質問に切り替える前に、スクロールするピクセル数を決定する必要があります。次のようにして、そのためslackSpaceを定義することができます：5は、質問の数となり

   var slackSpace = 5 * scrollPerQuestion; 
   

   を...。その番号は動的に管理するほうがよい（次の点を参照）。

5. あなたの質問を配列に入れると、管理が簡単になります。あなたはそれらif .. else if ... else if ...は必要ありませんが、ちょうどその数によって質問のテキストを選択することができます：questions.length：あなたはまた、いくつかの質問へのアクセスを持って

   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]); 
   

   この道を。

6. 進捗状況の計算が正しくありません。 2つの部分は異なるアスペクトを測定します。スクロールトップはの上部にのコンテンツを表示しますが、ドキュメントの高さはの下位のすべてのコンテンツのオフセットに対応します。 2つの違いは少なくともウィンドウの高さになるので、100％進歩することはありません。おそらく、到達不能な質問をすることさえあるでしょう。 slackSpaceが前のポイントで定義された値である

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

   ...：代わりにこれを使用しています。

7. 一部のブラウザでは、ページに戻ったり、ページを更新したりすると、以前のスクロール位置が保持されることがあります。したがって、ページが読み込まれるたびにページを上にスクロールする必要があります。

8. 文書の各辺には、デフォルトでいくつかのピクセルの余白があります。これは進捗の計算に悪影響を及ぼします。もっと簡単にするには、余白を0に設定し、質問要素自体に間隔をあけて、テキストがウィンドウの境界線から離れて表示されるようにします（質問要素にインラインスタイルではなくクラス名を指定します）。

   ここで

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