Css 固定div与锚导航-打破页面

我在页面左侧有一个div，其中包含指向右侧不同div的链接。我希望在滚动页面时，左div保持固定，但也显示在我跳转到的div旁边。问题是，当我点击一个链接时，它会跳转到div，但导航div不会呈现，直到我将鼠标逐块地移到它上面，它似乎会破坏页面。有什么想法吗

导航组

<div class="tableoutline fixed">
 <table class="notableoutline glossary">
  <thead>                               
  </thead>
  <tbody>
<tr>                
 <td class="datatd">
  <a href="#recommendedQuestions">{{data.learn.recommendedQuestions.title}}</a>                                     
 </td>                                  
</tr>
<tr>    
 <td class="datatd">            
  <a href="#process">{{process.title}}</a>                                      
 </td>                                  
</tr>
   </tbody>
 </table>
 </div> <!-- End of tableoutline -->

内容部

<div class="contentbox bottomMargin" id="process" name="process">
 <h1>{{data.learn.process.title}}</h1>
  <div class="questionsAndAnswers">                     
   <h2>{{process.question1}}</h2>
   <p>{{process.answer1}}</p>       
  </div>                                
 </div> <!-- End of Content Box /-->

{{data.learn.process.title}
{{process.question1}}
{{process.answer1}}

要使元素固定，请执行以下操作：

#element {
   position: fixed;
}

---

如果你想让它一直处于顶端，请使用z-index。你能做一把小提琴吗？我们需要一把JSFIDLE来帮助你