我有一個標題,當我向下滾動頁面時,標題應該縮小,並且菜單應該保持原樣。如何使我的菜單保持使用滾動功能?
當我向下滾動頁面時,我的菜單不會保留。我如何讓菜單保持不變?
Here is my jsfiddle:
https://jsfiddle.net/1vfLub67/1/
<style>
header{
text-align: center;
font-size: 72px;
line-height: 165px;
height: 165px;
background: #FFF380;
color: #fff;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header #check1
{
display:none;
visibility: hidden;
}
#headerdog
{
font-family: 'Baskerville Old Face';
}
header.sticky {
position: fixed;
font-size: 24px;
line-height: 48px;
height: 80px;
width: 100%;
background: #FFA625;
text-align: left;
padding-left: 20px;
}
header.sticky #check1
{
visibility:visible;
display:normal;
}
header.sticky #headerdog{
display:none;
}
</style>
<header><h1 id="headerdog">
</h1></header>
<div class="sixteen columns" id="check1">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Room Featured</a></li>
<li>
<a href="#">Members</a>
<ul style="z-index:1">
<li><a href="#" class="documents">Register</a></li>
<li><a href="#" class="messages">Feedback</a></li>
<li><a href="#" class="messages">Statistics</a></li>
</ul>
</li>
<li><a href="#">Deco Ideas</a></li>
<li><a href="#">Shopping</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
</script>
Please advise thank you!
沒關係,祝你工作順利! – Konekoya