Question

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

需要做两件事：

1）当用户滚动到视图中时，该部分变为“活动”状态。反过来，相应的点得到了活跃的＆＃39;同样。向下滚动时，每个前一个点应保持活动状态。当用户向上滚动时，“活动”状态为＆＃39;应该从点中删除类。我不确定如何解决这个问题？检测滚动方向？以下是当前代码的外观：

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。

Answer 1

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

您所要做的就是关闭所有灯光，然后点亮中线距离视口矩形中线最近的灯光。

你可以通过使用矩形几何来消除各种复杂性！

是的，这是一个演示 - 我描述了中线的东西有点不对，结果是它的部分顶部与屏幕中线。中线与中线相比，你并没有跟踪属性。

＆＃13;

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

＆＃13;

使用Javascript进行页面部分导航

1 个答案: