Question

下面是我网站菜单的以下代码，下面是当用户向下滚动100px时，我的菜单修复到浏览器窗口顶部的JS代码。

经过深思熟虑后，我需要做的是让菜单不显示在原始位置（滚动100px之前）。我试过显示：没有但这会使滚动时固定的菜单消失，但是我想让它显示不动。

我想要实现的是在用户滚动之前没有菜单可见。

HTML CODE

<ul id="menu" name="menu">
<li><img id="myImage" alt="Cambridge Website Design Company" src="logo1.png"  width="90" height="31" />
</li>
<li>
  <div><a href="index2.html">About Us</a>
  </div>
</li>
<li><a href="#">Services</a>
    <ul>
        <li><a href="graphic.html">Graphic Design</a>
        </li>
        <li><a href="website.html">Website Design</a>
        </li>
        <li><a href="budget.html">Budget Design</a>
        </li>
         <li><a href="hosting.html">Web Hosting</a>
        </li>
        <li><a href="printing.html">Printing</a></li>
        <li><a href="copywriting.html">Copy Writing</a></li>
    </ul>
</li>
<li><a href="#">Community</a>
  <ul>
        <li><a href="creative.html">Get Creative!</a>
    </li>
        <li><a href="charity.html">Charity Work</a>
        </li>
        <li><a href="impress.html">Internships</a>
        </li>
        <li><a href="careers.html">Careers</a>
        </li>
  </ul>
</li>
<li><a href="contact.html">Contact</a>

</li>
<li><a href="crc.html" target="_blank"><img src="logocrc.png" alt="Cambridge Regional College Website Design Students" width="100" height="25" border="0" /></a>
</li>
</li>
<li><a href="ruskin.html" target="_blank"><img src="logoruskin.png" alt="Cambridge Anglia Ruskin Website Design Students" width="100" height="28" border="0" /></a>
</li>
</li>
<li><a href="http://thedesigncompany.tumblr.com" target="_blank">Blog</a>
</li>
</ul>

JAVASCRIPT 在滚动条上修改菜单

<script>
$(document).scroll(function () {
var y = $(document).scrollTop(),
   image = $("#myImage"),
   header = $("#menu");


if (y >= 100) {
    //show the image and make the header fixed
    header.addClass('fixed');
    image.show();
} else {
    //put the header in original position and hide image
    header.removeClass('fixed');
    image.hide();
}
});
</script>

APOLOGIES我的CSS在下面

#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
font-weight:400;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 1101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 50px;
left: 50px;
vertical-align: middle;
}
#menu > li.active > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
height: 30px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
color: #333;


}
#menu li a:hover {
color: #28B701;
font-size: 18px;
vertical-align: middle;
font-family: 'Lato', "sans-serif; 700;";
}
#menu li ul li {display: inline-block;
float:none; }

Answer 1

在CSS中，正如您所说，将display: none;添加到#menu。

然后将display: table添加到#menu.fixed

滚动时如何只显示菜单？

1 个答案: