[英]how to make logo appear in fixed menu when scrolling down page
在我的網站上,我有一個菜單,當您向下滾動到100 px時,該菜單將自身固定在瀏覽器的頂部(top:0px; position:fixed;)。
但是我需要的是在菜單處於其原始位置(頂部:100px;位置:相對)時不顯示左側菜單中的小徽標,而是在用戶向下滾動頁面且菜單固定至瀏覽器窗口的頂部(頂部:0px;位置:固定;)
我的代碼如下。 我嘗試做一個JSFiddle,但是我無法復制html文件中的內容。
的CSS
#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
display: table;
width: 100%;
list-style: none;
position: relative;
top: 0px;
text-align: center;
-webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 30px;
z-index: 101;
}
#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:hover > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
}
#menu > li > ul {
display: none;
position: absolute;
text-align: center;
}
#menu li a {
display: block;
padding: 10px 10px;
text-decoration: none;
font-weight: lighter;
white-space: nowrap;
color: #333;
}
#menu li a:hover {
color: #CCCCCC;
font-size: 18px;
vertical-align: middle;
}
#menu li ul li {display: inline-block;
float:none; }
HTML(當菜單固定在瀏覽器頂部時,需要顯示logo.png)
<ul id="menu" name="menu">
<li><img src="logo.png" width="100" height="31" />
</li>
<li>
<div><a href="#">About Us</a>
</div>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Plumbing</a>
</li>
<li><a href="#">Heating</a>
</li>
<li><a href="#">Plastering</a>
</li>
<li><a href="#">Decorating</a>
</li>
<li><a href="#">Varnish</a></li>
<li><a href="#">Greenery</a></li>
</ul>
</li>
<li><a href="#">Community</a>
<ul>
<li><a href="#">Help US!</a>
</li>
<li><a href="#">Charity Work</a>
</li>
<li><a href="#">Impress Us...</a>
</li>
<li><a href="#">Careers</a>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#"><img src="logocrc.png" width="100" height="25" /></a>
</li>
</li>
<li><a href="#"><img src="logoruskin.png" width="100" height="28" /></a>
</li>
</li>
<li><a href="#">Blog</a>
</li>
Javascript(當用戶向下滾動100px時,菜單將固定在頂部)
<script>
$(document).scroll(function () {
var y = $(document).scrollTop(),
header = $("#menu");
if (y >= 100) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});
</script>
給您的圖片一個ID <img id="myImage">
<script>
$(document).ready(function(){
//hides them logo when the page loads
$("#myImage").hide();
});
$(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>
這一切你需要嗎?
var logo = $('#menu li:first-child img');
if (y >= 100) {
header.addClass('fixed');
logo.show();
} else {
header.removeClass('fixed');
logo.hide();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.