Question

正如你从小提琴中看到的那样，这是一个简单的页面，左边的菜单是固定的，带有可滚动的内容。

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

这是一个小提琴：

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

Answer 2

nav {
  position: absolute;
  left: 0;
  top: 100px; /* <-- this is your problem */
  display: block;
  width: 100px;
  padding: 4px 0;
  height: 100px;
  z-index: 100;
  color: pink;
}

Answer 3

从下方删除top:100px：

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

DEMO

Answer 4

在nav中更改以下css nav { ~~position：absolute;~~ ~~top：100px;~~ }

    nav { position: fixed;top: 0;}

demo

Answer 5

你的css改为：

body {
    padding: 0;
    margin: 0
}



h4 {
   font-weight: bold;

}

/*p {
    margin: 20px 0;
}

section {
    padding: 20px 0;
}*/

.wrapper {
    width: 400px;
    margin: 0 auto;
    position: relative;
    /*padding: 28px 0 0 0;*/
    margin-left:130px;
}

nav {
    position: absolute;
    left: 0;
    right; 0;
    top: 0px;

    display: block;
    width: 100px;
    padding: 4px 0;
    height: 100px;
    z-index: 100;
    color:pink;
}

nav a {
    font-family: helvetica;
color:pink;    
    padding: 2px; 4px;
    display: block;
    float: left;
    text-decoration: none;
    margin-right: 4px;


    width: 100%;

    font-size:20px;

}

nav a:hover,
nav a.active {
    background: white;
    color:gray; 
}

.fixed {
    position: fixed;
    top: 0
}

你的js改为：

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;

    $('body,html').animate({
        scrollTop: scrollPoint
    }, 500);

    return false;

})


$(window).scroll(function() {

    var windscroll = $(window).scrollTop();
    if (windscroll >= 0) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {

            if ($(this).position().top <= windscroll + ($(this).index('section'))*(35)) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');

            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();

修复了带有可滚动内容和锚点的左侧菜单

5 个答案: