Question

使用Javascript滚动浏览锚点后（锚点溢出或者在可滚动的div中不再可见）之后是否可以使div变为可见？这是一个完全说明的网站。如果用户选择滚动到一段文本而不是使用锚标签跳转到那里，我想在导航栏中显示一个图像（在div中）以突出显示活动链接。滚动到某个部分后，该部分将在导航栏中突出显示（图像变为可见）。＆＃34;隐藏＆＃34;和＆＃34; hideaway2＆＃34;是＆＃34;＃part1＆＃34;和＆＃34;＃part2＆＃34;在导航栏中单击。不再有效的那个显示无（display =＆＃39; none＆＃39;）。我希望能够滚过＆＃34;＃part2＆＃34;锚（＆＃34; part2＆＃34;）并且有div id＆＃34; hideaway2＆＃34;变得可见。我不是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>

感谢您的帮助！

Answer 1

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

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

链接到JS小提琴：http://jsfiddle.net/cxyg93h8/4/

每次触发滚动事件时，代码都会检查每个＆＃34;标签＆＃34; （content / panel / whatever）查看它是否是视图中最顶部的选项卡（在可滚动容器的当前可见区域中）。如果是这样，它会将CSS类分配给相应的超链接，以指示它是selected。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

这可以通过多种方式进行改进，例如必要时推送滚动事件，动态生成选项卡和菜单等等，但我试着保持简单，以便明白这一点。

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

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

滚动浏览另一个div中的锚点后，div变为可见？

2 个答案: