使用Javascript的頁面部分導航

我在解決我試圖編寫的插件上的滾動問題時遇到了困難。我添加了一個截圖，我希望這可以幫助您更輕鬆地描述UI。使用Javascript的頁面部分導航

兩件事情需要發生：

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

通過方法，我總是試圖將問題摺疊到純幾何。如果您響應滾動事件，則可以保留一個更新的矩形，該矩形映射到文檔上的視口位置。您可以製作每個頁面部分的位置矩形列表。

您只需關閉所有燈光，然後點亮中線距離視口矩形中線最近的燈。

通過使用矩形幾何體，您可以擺脫各種複雜性！

對，這裏是一個演示 - 我描述了中線的東西有點不對，原來它是截面頂部與屏幕中線。做中線與中線，你不跟蹤propery。

<!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的頁面部分導航

回答

相關問題