Make a div become visible after scrolling past an anchor point in another div?

Issue

Is it possible to make a div become visible after scrolling past an anchor (after the anchor overflows or can no longer be seen in the scrollable div) using JavaScript? This is a fully illustrated website. There is an image (in a div) that I want to become visible in the navigation bar to highlight the active link if the user chooses to scroll to a section of text versus use the anchor tag to jump there. Once they scroll to a section, that part is highlighted (image becomes visible) in the navigation bar. "hideaway" and "hideaway2" are the divs that become visible when "#part1" and "#part2" are clicked in the nav bar. The one that is no longer active displays none (display='none'). I want to be able to scroll past the "#part2" anchor ("part2") and have div id "hideaway2" become visible. I am not much of an expert on JavaScript. Here is my html code for this part:

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

Solution

One method is to use the scroll event to detect when a certain region is scrolled into view, and then update the navigation bar based on this.

Here is a working example, the only missing piece is your images, but since I didn't have those handy I faked it with some text instead.

Link to JS Fiddle: http://jsfiddle.net/cxyg93h8/4/

Every time the scroll event is fired the code checks each "tab" (content/panel/whatever) to see if it is the top-most tab in view (in the current visible area of the scrollable container). If so, it assigns a CSS class to the corresponding hyperlink to indicate that it is 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>

What's interesting about this approach is that the hyperlink does not directly set the selected class; clicking a hyperlink only scrolls the target content into view, but this triggers the scroll event on body who in turn updates the current hyperlink.

This could be improved in several ways such as throtting the scroll event if necessary, generating the tabs and menu dynamically, etc., but I tried to keep it simple enough to get the point across.

It also has a possible issue in that if your content areas are short and/or your display is tall then the last few items will never really be selected but to avoid this you could just add some extra arbitrary padding to bottom of the page so that when the bottom-most tab is scrolled into view it appears at the top of the visible area.

Answered By - nothingisnecessary