滚动经过另一个 div 中的锚点后使 div 变得可见？答案

【问题标题】：Make a div become visible after scrolling past an anchor point in another div?滚动经过另一个 div 中的锚点后使 div 变得可见？
【发布时间】：2014-11-15 05:07:56
【问题描述】：

是否可以使用 Javascript 在滚动经过锚点后（锚点溢出或在可滚动的 div 中不再可见）使 div 变得可见？这是一个完整的插图网站。如果用户选择滚动到文本部分而不是使用锚标记跳转到那里，我希望在导航栏中显示一个图像（在 div 中）以突出显示活动链接。一旦他们滚动到某个部分，该部分就会在导航栏中突出显示（图像变为可见）。 “hideaway”和“hideaway2”是在导航栏中单击“#part1”和“#part2”时可见的 div。不再活动的显示无（display='none'）。我希望能够滚动过去“#part2”锚点（“part2”）并让 div id“hideaway2”变得可见。我不是 JavaScript 方面的专家。这是我这部分的 html 代码：

<div id="hideaway" style="display:block;"> <!--first active landing link-->
<img src="page_marker_mentaltricks_active.gif" width="248" height="50" /> </div>

<div id="hideaway2" style="display:none;">
<img src="page_marker_calmnerves_active.gif" width="209" height="50" /> </div>

<a href="#part1" onclick="document.getElementById('hideaway').style.display='block'; document.getElementById('hideaway2').style.display='none';"><img src="images/page_marker_mentaltricks.jpg" alt="mental tricks" name="mentaltricks" width="248" height="50" id="mentaltricks" /></a>

<a href="#part2" onClick="document.getElementById('hideaway').style.display='none'; document.getElementById('hideaway2').style.display='block';"><img src="images/page_marker_calmnerves.jpg" alt="calm your nerves" name="calmnerves" width="209" height="50" id="calmnerves" /></a>

感谢您的帮助！

【问题讨论】：

标签： javascript html javascript-events

【解决方案1】：

一种方法是使用scroll事件来检测某个区域何时滚动到视图中，然后基于此更新导航栏。

这是一个工作示例，唯一缺少的部分是您的图像，但由于我没有那些方便的东西，所以我用一些文字来伪造它。

JS Fiddle 链接：http://jsfiddle.net/cxyg93h8/4/

每次触发滚动事件时，代码都会检查每个“选项卡”（内容/面板/其他）以查看它是否是视图中最顶部的选项卡（在可滚动容器的当前可见区域中）。如果是这样，它会为相应的超链接分配一个 CSS 类以指示它是selected。

document.onscroll = function (event) {
    var elements = document.getElementsByClassName("tab");
    for (var i = 0, len = elements.length; i < len; i++) {
        var scrollTop = (document.documentElement && document.documentElement.scrollTop) || 
          document.body.scrollTop;
        if (elements[i].offsetTop >= scrollTop) {
            // found top-most tab in view
            // remove previous "selected" class
            var selectedElements = document.getElementsByClassName("selected");
            if (selectedElements.length === 1) {
                selectedElements[0].className = "";
            }
            // assign new "selected" class
            var tab = document.getElementById("tab" + (i + 1).toString() + "Selector");
            if (tab) {
                tab.parentElement.className = "selected";
            }
            break;
        }
    }
};

    .nav-bar {
        position: fixed;
        left: 10px;
        top: 16px;
        width: 140px;
        margin: 0;
        border: 0;
        padding: 0;
    }
    .nav-bar ul {
        width: 100%;
        list-style: none;
        margin: 0;
        border: 0;
        padding: 0;
    }
    .nav-bar li {
        list-style: none;
        margin: 2px 0;
        border: 1px solid #999;
        padding: 10px 20px;
        background-color: #ccc;
    }
    .tabs {
        margin: 0 0 0 140px;
        padding: 0;
        border: 0;
        overflow: auto;
    }
    .tab {
        margin: 10px;
        border: 1px solid #ccc;
        padding: 10px;
        width: 400px;
    }
    .nav-bar .selected {
        background-color: Red;
    }

<div class='nav-bar'>
    <ul>
        <li class="selected"><a id='tab1Selector' href="#tab1">Tab 1</a>

        </li>
        <li><a id='tab2Selector' href="#tab2">Tab 2</a>

        </li>
        <li><a id='tab3Selector' href="#tab3">Tab 3</a>

        </li>
        <li><a id='tab4Selector' href="#tab4">Tab 4</a>

        </li>
        <li><a id='tab5Selector' href="#tab5">Tab 5</a>

        </li>
    </ul>
</div>
<div class="tabs"> <a name="tab1"></a>
        <div class="tab">
          Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
          Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
          Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
          Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
        </div>
        <a name="tab2"></a>
          <div class="tab">
            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
          </div>
          <a name="tab3"></a>
            <div class="tab">
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
            </div>
            <a name="tab4"></a>
              <div class="tab">
                Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              </div>
              <a name="tab5"></a>
                <div class="tab">
                  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                </div>
    </div>

这种方式的有趣之处在于，超链接不直接设置selected类；单击超链接只会将目标内容滚动到视图中，但这会触发body 上的scroll 事件，该事件又会更新当前超链接。

这可以通过多种方式进行改进，例如在必要时限制滚动事件、动态生成选项卡和菜单等，但我尽量保持简单，以便理解重点。

还有一个可能的问题是，如果你的内容区域很短和/或你的显示器很高，那么最后几项永远不会是selected，但为了避免这种情况，你可以在底部添加一些额外的任意填充页面，以便当最底部的选项卡滚动到视图中时，它会显示在可见区域的顶部。

【讨论】：

一句话：代码向下滚动，而不是向上滚动。否则，这太棒了。
谢谢。我最初将它放在 chrome 中，但有一个 documentElement 的错误，现在已修复，并在 IE11/Chrome/FF 中验证
感谢您的详尽回答。它真的很有帮助。另一个有趣的解决方法是将每个锚点放在一个 div 中并使用 CSS 或 JS 创建将应用于导航链接的悬停效果。因为如果不将鼠标悬停在滚动条上就无法滚动，因此当您滚动经过每个锚点时会激活悬停效果。

【解决方案2】：

尝试使用 jquery 实现您的功能：

//compare original y position of element to y position of page
if( $(window).scrollTop() > 50){
   //do something like:
   //$('#img').show();
   //$('#img').css('','');
}else{
    //if scroll back to initial position 
}

【讨论】：

感谢您的帮助，非常感谢。我会试试的