JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" /> 
    <link rel="stylesheet" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-vertical.css" />   

  
    <!-- JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://www.appelsiini.net/download/jquery.viewport.mini.js" ></script>
    <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script> 
    <script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script> 
  

  <div id="right_panel">
    
    <ul id="horz_nav" class="parent_list sf-menu sf-vertical ">
      <li><a href="#item1">Item 1</a>
        <ul class="child_list">
          <li><a href="#item2">Item 2</a>
          <li><a href="#item3">Item 3</a>
        </ul>
      </li>

      <li><a href="#item4">Item 4</a>
        
        <ul class="child_list">
          <li><a href="#item5">Item 5</a>
          <li><a href="#item6">Item 6</a>
        </ul>
      </li>        

      <li><a href="#item7">Item 7</a>      
      
      
    </ul>
  
  </div>
  
  <div id="wrap">
  
    <div id="item1" class="item"><h1>Item 1</h1></div>
    <div id="item2" class="item sub"><h3>Item 2</h3></div>
    <div id="item3" class="item sub"><h3>Item 3</h3></div>
    <div id="item4" class="item"><h1>Item 4</h1></div>
    <div id="item5" class="item sub"><h3>Item 5</h3></div> 
    <div id="item6" class="item sub"><h3>Item 6</h3></div>    
    <div id="item7" class="item"><h1>Item 7</h1></div>

    
    
    <div class="clear"></div>
  </div>

CSS

body {
    margin:0;
    padding:0
}

.clear {
    clear:both
}

#wrap {
    background:#eee;
    width:640px;
    float:right
}

.item {
    padding: 20px;
    background:#fff;
    border: solid 2px #d4d4d4;
    height:600px;
    margin:20px 20px 20px -40px
}

.sub {
    margin-left:60px;
    border-left: solid 5px #d4d4d4;
}

#right_panel {
    background:#fff;
    padding:20px;
    width:200px;
    height:100%;
    display:block;
    position:fixed;
    border: solid #ccc 5px;
    border-left: 0px;
}

#right_panel ul {
    margin:0;
    padding:0;
    list-style:none
}

.current, .sf-menu li.sfHover, .sf-menu li.sfHover a {
    background: red;            
    color:#fff;
}

.sfHover ul li a:hover {
    background: #000;
    color:#fff;        
}

JavaScript

$(function(){
    $("ul.sf-menu").superfish({
        opacity:'show',
        delay:     1200
    });

   $(window).bind("scroll", function(event) {

        
        $("div.item:in-viewport").each(function() {
            // Append class to the visible item
            $(this).addClass("current");
            // Get anchor attribute of this element so it will be use as a reference or target in appending the "current" class
        });
        
        $("div.item:below-the-fold, div.item:above-the-top").each(function() {
            // Remove class if it's not visible on the screen
            $(this).removeClass("current");
        });

    });
    
    
});