使用Javascript進行頁面部分導航
[英]Page section navigation with Javascript
問題描述
我在嘗試編寫的插件上解決滾動問題時遇到困難。 我正在添加一個屏幕截圖，希望該屏幕截圖有助於更輕松地描述UI。
需要發生兩件事：
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。
1 個解決方案
解決方案1
1 已采納 2016-05-31 15:14:42
通過方法，我總是嘗試將問題分解為純幾何。 如果您響應滾動事件，則可以保留一個更新的矩形，該矩形映射到文檔上視口的位置。 您可以列出每個頁面部分的位置矩形。
您要做的就是關閉所有燈光，然后點亮其中線最靠近視口矩形中線的那一盞。
您可以通過使用矩形幾何來擺脫各種復雜性！
是的，這是一個演示-我描述的中線有點不對勁，原來是部分頂部與屏幕中線。 做中線還是中線，您就不會跟蹤性能。
<!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>
使用反應路由器在頁面的部分內導航
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.