如何使徽標出現在固定菜單中滾動頁面

Question

在我的網站上我有一個菜單，當您向下滾動到100 px時，菜單將自身修復到瀏覽器的頂部（top：0px; position：fixed;） 。

但是，我需要的是左側菜單中的小徽標，當菜單處於其原始位置（頂部：100px;位置：相對）時不顯示，但在用戶向下滾動頁面時出現並且菜單修復到瀏覽器窗口的頂部（top：0px; position：fixed;）

我的代碼如下。我試圖做一個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> 

Answer 1

給你的圖像的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> 

Answer 2

這就是你需要的全部？

var logo = $('#menu li:first-child img'); 
if (y >= 100) { 
    header.addClass('fixed'); 
    logo.show(); 
} else { 
    header.removeClass('fixed'); 
    logo.hide(); 
}