jquery - 修复了带有可滚动内容和 anchor 的左侧菜单

Question

正如您从 fiddle 中看到的那样，这是一个简单的页面，左侧的菜单是固定的，内容可滚动。

我希望菜单和内容在同一层级，但是顶部有一个空白区域我不知道如何删除它。所以当我向下滚动时，菜单会向上移动。

这是一个 fiddle :

<nav>

<a href="#" data-scroll="top">Top</a>

<a href="#" data-scroll="news">News</a>

<a href="#" data-scroll="products">Products</a>

<a href="#" data-scroll="contact">Contact</a>

</nav>

<div class="wrapper">

<section id="top" data-anchor="top">

    <h4>TOP</h4>

        <p>Lorem ipsum dolor sit amet,</p>

        <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris    dictum nisl </p>

</section>

<section id="news" data-anchor="news">

    <h4>NEWS</h4>

        <p>Lorem ipsum dolor sit amet</p>

        <p>Duis vel augue quis elit ultrices fermentum ut eu risus. </p>

</section>

<section id="products" data-anchor="products">

    <h4>PRODUCTS</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

        <p>Duis vel augue quis elit ultrices fermentum ut eu risus.</p>

</section>

<section id="contact" data-anchor="contact">

    <h4>CONTACT</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel.</p>

        <p>Duis vel augue quis elit ultrices fermentum ut eu risus.</p>

</section>

http://jsfiddle.net/gUWdJ/1553/

Answer 1

像这样尝试: Demo

nav {
    position: absolute;
    left: 0;
    right; 0;
    top: 0px; /* changed 100px to 0 */    
    display: block;
    width: 100px;
    padding: 4px 0;
    height: 100px;
    z-index: 100;
    color:pink;
}

编辑: Updated Demo

为了文本高亮，在js中改变这个

if (windscroll >= 100) {

到

if (windscroll >= 0) {