个人中心
gpt4 book ai didi

javascript - 使用 Javascript 进行页面部分导航

转载 作者：行者123 更新时间：2023-12-03 06:50:00 26 4
gpt4 key购买 nike

我在解决我尝试编写的插件上的滚动问题时遇到困难。我添加了一个屏幕截图，希望有助于更轻松地描述 UI。 UI

需要发生两件事:

1) 当用户滚动到 View 中时，该部分变为“事件”，相应的点也变为“事件”。向下滚动时，前面的每个点都应保持事件状态。当用户向上滚动时，“事件”类应该从点中删除。我不知道如何解决这个问题？检测滚动方向？当前代码如下所示:

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;
    }

};

任何想法和/或代码片段都会很棒。我开始对这个东西感到恼火了。

注意:请仅使用 Pure/Vanilla Javascript 解决方案，不要使用 jQuery。

最佳答案

通过方法，我总是尝试将问题分解为纯几何。如果响应滚动事件，您可以保留一个更新的矩形，该矩形映射到文档上视口(viewport)的位置。您可以列出每个页面部分的位置矩形。

您所要做的就是关闭所有灯，然后点亮中线最接近视口(viewport)矩形中线的灯。

通过使用矩形几何图形，您可以摆脱各种复杂性!

对，这是一个演示 - 我描述的中线有点错误，结果是部分顶部与屏幕中线。做中线与中线的比较，你就无法正确跟踪。

<!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>

关于javascript - 使用 Javascript 进行页面部分导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37549312/

26 4 0
文章推荐： templates - 什么是无逻辑模板
文章推荐： xcode - 移至 Xcode 中文本的开头
文章推荐： 需要 BlackBerry RIMAPPSA2 签名 key - 为什么？
文章推荐： javascript - 如果我把它放在 ng-repeat 中，为什么 ng-model=$scope.model 未定义？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com