当目标div在jQuery中出现时如何突出显示锚链接？

Question

我有一个类似如下布局的网页；

HTML 是；

<div class="header" style="text-align: center">Demo</div>
<div class="navi">
    <div class="title">
        Options
    </div>
</div>
<div class="content">
    <div class="da">
        <a href="#diva" class="current">diva</a>
        <a href="#divb">divb</a>
        <a href="#divc">divc</a>
        <a href="#divd">divd</a>
    </div>
    <div class="db">
        <div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
        <div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
        <div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
        <div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
    </div>
</div>
<div class="footer">&nbsp;</div>

CSS 是；

html, body, div, h2, img, ul, li, form, time {
  margin: 0;
  padding: 0;
  border: 0;
}
html, body {
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 800px;
}
.header{
  height: 40px;
  color: #FFF;
  background-color: #666666;
}
.title{
  display: block;
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
.content{
  margin-bottom: 36px;
}
.footer{
  height: 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: solid 1px #CCCCCC;
  background: #FFFFFF;
}

.da,.db{
  position: absolute;
  z-index: 0;
  top: 82px;
  bottom: 30px;
}
.da{
  width: 200px;
  border-right: solid 1px #CCCCCC;
  overflow: visible !important;
}
.da a{
  font-family: Tahoma;
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #555;
}
.da a:hover{
  background-color: #DDD;
}
.da .current,.da .current:hover{
  background-color: #FF6600;
}
.db{
  left: 200px;
  right: 0;
  background-color: #CC99FF;
  overflow: scroll;
  overflow-x:hidden;
}

侧边栏的链接锚定到 4 个级联 div。它们链接到 div，当我单击链接时，相应的 div 会向上滚动。这工作得很好。但我试图实现一些不同的东西。当前可见 div 的链接可以被赋予橙色背景色，这样当用户滚动页面时，橙色会根据页面上的当前 div 从一个链接转移到另一个链接。经过一些谷歌搜索和研究，我发现这个 SO 问题很有用 jQuery changing css on navigation when div # scrolls into view。 fiddle 中提供了解决方案的演示，这正是我想要的。

但是当我试图在我的布局中实现这个解决方案时，它不起作用，即链接没有突出显示到相应的 div。

Here 是我的小提琴。

如何在我的布局中实现相同的功能？

Answer 1

试试这个：

CSS：

.da,.db{
  position: relative; // changed to relative. Because of absolute your document height is affected.
  z-index: 0;
  top: 82px;
  bottom: 30px;
}

.db{
  left: 142px;
    top:42px;
  right: 0;
  background-color: #CC99FF;
  overflow: scroll;
  overflow-x:hidden;
}

jQuery：

$('.da a').removeClass('current').eq(i).addClass('current'); // replaced selected with current which you are using.

DEMO

Answer 2

我无法理解其中的一些答案，但我发现这个想法非常简单。

它基本上是说鼠标会在屏幕上的某个位置出现，如果它在特定的 div 内，则突出显示匹配的链接。

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
    <span id ="menu">&#9776;</span> 
    <ul id="top-menu">
        <li><a href="#one" class="links">Menu 1</a></li>
        <li><a href="#two" class="links">Menu 2</a></li>
        <li><a href="#three" class="links">Menu 3</a></li>
        <li><a href="#four" class="links">Menu 4</a></li>
        <li><a href="#five" class="links">Menu 5</a></li>
        <li><a href="#six" class="links">Menu 6</a></li>
    </ul>
</div>
<div id="wrapper">
    <div id="one" class="container">
        one
    </div>
    <div id="two" class="container">
        two
    </div>
    <div id="three" class="container">
        three
    </div>
    <div id="four" class="container">
        four
    </div>
    <div id="five" class="container">
        five
    </div>
    <div id="six" class="container">
        six
    </div>
</div>

CSS

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

body{
    font-family: Geneva, Tahoma, Verdana, sans-serif;
    margin: 0px;
}

.nav{
    width: 100%;
    height: 50px;
    background: rgba(200,200,200,0.2);
    position: fixed;
    top: 0px;
}

#menu{
    float: right;
    font-size: 40px;
    font-weight: normal;
    padding-right: 20px;
    color: rgba(100,100,100,0.9);;
}

.nav ul{
    width: 150px;
    list-style-type: none;
    background: rgba(200,200,200,0.2);
    border-radius: 5px;
}

#top-menu{
   clear: both;
   display: block;
   float: right;
   padding-left: 0px;
   margin-top: 10px;
   margin-right: 20px;

}
.links{
    color: black;
    font-size: 20px;
    font-weight: normal;
}

.nav ul li a{
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
    color: #fff;
    background-color: black;
    border-left: thick solid red;
}

#wrapper{
    margin-top: 50px;
}

.container{
    width: 800px;
    height: 600px;
    margin: 0px auto;
    background: rgba(200,200,200,0.2);
    border-bottom: 1px solid rgba(200,200,200,1);
    padding: 20px;
}

.active{
    color: white;
    background-color: rgba(100,100,100,1);
    border-left: thick solid rgba(0,255,0,0.5);
}

jQuery

$(document).ready(function(){

   $("div").mouseenter(function(){
     var id = $(this).attr('id');
     $('a').removeClass('active');
     $("[href=#"+id+"]").addClass('active');
   });

});

Source