JavaScriptを使用したページセクションのナビゲーション

書き込みしようとしているプラグインでスクロールの問題を解決するのが難しいです。スクリーンショットを追加しています。これは、UIをより簡単に記述するのに役立ちます。 JavaScriptを使用したページセクションのナビゲーション

2つのことが起こる必要があります。

1）と、ユーザーがスクロールビューに、セクションでは、「アクティブ」になり、今度は、対応するドットは、同様に「アクティブ」を取得します。前の各ドットは、スクロールしながらアクティブなままでなければなりません。ユーザーがスクロールアップすると、「アクティブ」クラスをドットから削除する必要があります。私はこれを解決する方法がわからないのですか？スクロール方向を検出しますか？現在のコードの外観は次のとおりです。

var _activeSection = function() { 

    var setActive; 
    setActive = false; 

    for (var i = 0, len = sections.length; i < len; i++) { 
     // Last section, bottom of window 
     if (!setActive && elementInView(sections[i]) && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
      sections[i].classList.add('active'); // Add 'active' class when Section is in view and reaches bottom of the viewport 
     } else if (!setActive && elementInView(sections[i])) { 
      sections[i].classList.add('active'); // Add 'active' class when Section is in view 
      setActive = true; 
     } else { 
      sections[i].classList.remove('active'); 
     } 
    } 

};

2）これは難しい部分です：スクロールの進行要素（考え方の縦線）です。今、私は正確に各増分を正確に計算する方法を見つけることができません。現在の機能：

var _setScrollProgress = function() { 

    // How many sections are there? 
    var sectionCount = (sections.length -1); 

    // Metrics 
    var scrollProgress = (scrollTop/root.innerHeight) * 100/sectionCount + '%';// get amount scrolled (in %) 

    if (settings.position === 'left' || settings.position === 'right') { 
     highlight.style.height = scrollProgress; 
    } 

};

アイデアやコードスニペットはすばらしいでしょう。私はこのことで私の髪を引き出し始めている。

注：純粋な/バニラのJavascriptソリューションのみ、jQueryはしないでください。

出典

2016-05-31 nfq

あなたは、スクロールイベントリスナーを使用していますか？ https://developer.mozilla.org/en/docs/Web/Events/scroll – Danmoreng

はい、もちろんです。私はプラグインにすべてのコードを含めていません。しかし、はい、絶対に。私はスクロールイベントリスナーとスロットリングも使用しています。 – nfq

私は常に問題を純粋なジオメトリに崩壊しようとします。スクロールイベントに応答する場合は、ドキュメント上のビューポートの位置にマップされた更新された矩形を維持することができます。各ページセクションの位置矩形のリストを作成することができます。

あなたがしなければならないことは、すべてのライトをオフにしてから、ビューポートの四角形の正中線に最も近い中心線を点灯させるだけです。

矩形ジオメトリを使用すると、あらゆる種類の複雑さを取り除くことができます。

右のデモがあります - 正直なことを少し間違って説明しましたが、それはセクショントップとスクリーンの中間線です。正中線と正中線の両方を行うと、正しいものを追跡していません。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Little Demo</title> 
 
     <style type="text/css"> 
 
     body { 
 
      margin: 10px; 
 
     } 
 
      .section { 
 
       position: relative; 
 
       display: block; 
 
       width: 70%; 
 
       margin: 0 0 10px; 
 
       background: red; 
 
      } 
 
      .section:before { 
 
       content: ''; 
 
       display: block; 
 
       padding-top: 60%; 
 
      } 
 
      .guide { 
 
       position: fixed; 
 
       left: 100%; 
 
       top: 50%; 
 
       width: 20%; 
 
       margin-left: -5%; 
 
       list-style: none; 
 
       padding: 0; 
 
      } 
 
      .guide li { 
 
       position: relative; 
 
       margin-bottom: 10px; 
 
      } 
 
      .guide b { 
 
       position: relative; 
 
       display: inline-block; 
 
       width: 20px; 
 
       height: 20px; 
 
       background: black; 
 
       border-radius: 10px; 
 
       vertical-align: middle; 
 
      } 
 
      .guide b:before { 
 
       position: absolute; 
 
       content: ''; 
 
       display: block; 
 
       height: 20px; 
 
       border-left: 2px solid black; 
 
       left: 9px; 
 
       top: -10px; 
 
      } 
 
      .guide li:first-child b:before { 
 
       content: none; 
 
      } 
 
      .guide span { 
 
       position: absolute; 
 
       top: -5px; 
 
       left: -4px; 
 
       margin-left: -120px; 
 
       display: block; 
 
       white-space: nowrap; 
 
       width: 140px; 
 
       text-align: right; 
 
       border: 1px black solid; 
 
       padding: 4px; 
 
       box-shadow: 3px 3px rgba(0,0,0,0.3); 
 
       border-radius: 10px; 
 
       opacity: 0; 
 
      } 
 
      .guide span b { 
 
       width: 16px; 
 
       height: 16px; 
 
       background: red; 
 
       border: 2px solid black; 
 
      } 
 
      .guide span b:before { 
 
       border-color: red; 
 
       left: 6px; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="section">  </div> 
 
     <div class="section">  </div> 
 
     <div class="section">  </div> 
 
     <div class="section">  </div> 
 
     <div class="section">  </div> 
 
     <div class="section">  </div> 
 

 
     <ul class="guide"> 
 
      <li><b></b><span class="indicator">Section 1 <b></b></span></li> 
 
      <li><b></b><span class="indicator">Section 2 <b></b></span></li> 
 
      <li><b></b><span class="indicator">Section 3 <b></b></span></li> 
 
      <li><b></b><span class="indicator">Section 4 <b></b></span></li> 
 
      <li><b></b><span class="indicator">Section 5 <b></b></span></li> 
 
      <li><b></b><span class="indicator">Section 6 <b></b></span></li> 
 
     </ul> 
 
     <script type="text/javascript"> 
 
      //I'd measure this in JQuery, but do it mathematically here: 
 
      //Calculate the midpoints of all of the sections. 
 
      var sections = document.getElementsByClassName('section'); 
 
      var sectiontops = []; 
 
      
 
      function updateSectionTops() { 
 
       sectiontops = []; 
 
       var y = 10; //top body margin is 10 
 
       for (var s=0; s<sections.length; s++) { 
 
        var h = sections[s].offsetHeight; 
 
        sectiontops.push(y); 
 
        y+=h; 
 
       } 
 
      } 
 

 
      var indicators = document.getElementsByClassName('indicator'); 
 

 
      function updateIndicators() { 
 
       for (var i = 0; i < indicators.length; i++) { 
 
        indicators[i].style.opacity = 0; 
 
       } 
 
       var ls = 0; 
 
       for (var s = 0; s < sections.length; s++) { 
 
        if (sectiontops[s] > clientmid) break; 
 
        ls = s; 
 
       } 
 
       for (var i = 0; i <= ls; i++) { 
 
        indicators[i].style.opacity = 1; 
 
       } 
 
       
 
      } 
 

 
      var clientmid = 0; 
 
      function updateClientMid() { 
 
       var height = window.innerHeight 
 
        || document.documentElement.clientHeight 
 
        || document.body.clientHeight; 
 
       clientmid = window.scrollY + (height/2); 
 
       updateSectionTops(); 
 
       updateIndicators(); 
 
      } 
 
      updateClientMid(); 
 

 
      window.onscroll = updateClientMid; 
 
      window.onresize = updateClientMid; 
 
     </script> 
 
    </body> 
 
</html>

出典

2016-05-31 15:14:42

チップマークをありがとう。正中線では、ビューポートの垂直中心を想像し、それを処理することを提案していますか？私はいろいろなことを試みましたが、機能が紙面上にあるべきものをスケッチしていても、まだ問題を完全に解決することはできませんでした。 – nfq

メインスクロール方向が垂直であると仮定すると、ビューポートのアイデアの中間点（水平線Y値など）とセクション矩形の中央線の間の距離が最も近いセクションを示します。あなたのスクロールが水平である場合、あなたは垂直の正中線を見ています。両方の場合、dx * dx + dy * dyを使用できます.dxとdyは垂直線と水平線の差です。 –

申し訳ありません。はい、私は垂直のスクロールで水平（真ん中）を意味しました。このプラグインでは、水平スクロールは本当に必要ではありません。あなたの提案をありがとう。しかし、彼らは私がすでに実装していることを示唆しているので、私を助けてくれません。基本的に、セクションがスクロールして表示されると、クラス 'アクティブ'が取得され、アクティブなクラスが動的に追加されます。私は残りの部分、私は本質的に元の質問で説明したものと苦労しています。 – nfq

JavaScriptを使用したページセクションのナビゲーション

答えて

関連する問題