javascript - 修复了单页网站问题中的切换菜单

Question

如何阻止菜单项在菜单栏前面滑动？ 菜单项不应该在菜单栏前面滑动，应该简单地下拉，或者在后面滑动...... 我究竟做错了什么？ 谢谢。

这是一个 Fiddle

JS

//------This slides menu contet down ------:

$(document).ready(function(){
  $("#menu-button").click(function(){
    $("#menu-items").slideToggle("slow");
  });

//----This brings menu content back up when an item is clicked -----:

$('#menu-items li a').on("click", function(){
        $('#menu-items').slideUp();
    });

});

//----this adds smooth scrolling and negative space for Header compensation ----:

$(document).ready(function () {
    $(window).scroll(function () {

        var y = $(this).scrollTop();

        $('.link').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 75) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });

    });
});


$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top -75)
                }, 850);
                return false;
            }
        }
    });
});

CSS

body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;        
}

* {
    margin: 0;
    padding: 0;
}

section { width: 100%; height: 100%; color: white;}
#section01, #section03, #section05 { background: #24354c; } 
#section02, #section04, #section06 { background: #374962; } 


#header {
    width: 100%;
    height: 75px;
    position: fixed;
    background-color: #152233;
    top: 0px;
    left: 0px;
}

#menu-items {
    display:none;
    list-style: none;
    width: 100%;
    margin:0;
    padding-top: 75px;
}

#menu-items li {
    border-bottom: 1px solid #297d35;
    background-color: #67af32;
}

#menu-items li:hover {
    background: #4a9529;
}

#menu-items li a{
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 15px 0px;
    font-family: sans-serif;
    font-size:16px;
    text-align: center;
}

#menu-button {
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 40px;
    top: 18px;
    right: 15px;
}

HTML

<div id="header">

<img id="menu-button" src="http://downtownkitchenmke.com/wp-content/uploads/2015/07/menuButton.png" alt="menu" border="0" width="340" height="40" />

<ul id="menu-items">
    <li><a href="#section01">SECTION 01</a></li>
    <li><a href="#section02">SECTION 02</a></li>
    <li><a href="#section03">SECTION 03</a></li>
    <li><a href="#section04">SECTION 04</a></li>
    <li><a href="#section05">SECTION 05</a></li>
    <li><a href="#section06">SECTION 06</a></li>
</ul>

</div>

<section id="section01"><h1>SECTION 01</h1></section>
<section id="section02"><h1>SECTION 02</h1></section>
<section id="section03"><h1>SECTION 03</h1></section>
<section id="section04"><h1>SECTION 04</h1></section>
<section id="section05"><h1>SECTION 05</h1></section>
<section id="section06"><h1>SECTION 06</h1></section>

Answer 1

我会在下拉列表之前添加另一个 div，而不是尝试在菜单项列表上使用 Padding-top:

添加 div 'header-buffer':

<div id='header-buffer'></div>    
<ul id="menu-items">
   <li><a href="#section01">SECTION 01</a></li>
   <li><a href="#section02">SECTION 02</a></li>
   <li><a href="#section03">SECTION 03</a></li>
   <li><a href="#section04">SECTION 04</a></li>
   <li><a href="#section05">SECTION 05</a></li>
   <li><a href="#section06">SECTION 06</a></li>
</ul>

从“menu-items”中删除填充并为“header-buffer”添加高度:

#menu-items {
 display:none;
 list-style: none;
 width: 100%;
}

#header-buffer {   
 width: 100%;
 height:75px
}