使用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的页面部分导航

回答

相关问题