내 웹 사이트에서

Question

페이지를 스크롤 할 때 고정 메뉴에 로고를 표시하는 방법 메뉴가 100px로 내려갈 때 메뉴가 브라우저 상단 (상단 : 0px, 위치 : 고정)으로 수정되는 메뉴가 있습니다. .

그러나 내가 필요한 것은 메뉴가 원래 위치 (상단 : 100px, 위치 : 상대)에있는 동안 표시되지 않는 왼쪽의 메뉴 내의 작은 로고이지만 사용자가 페이지를 아래로 스크롤하면 표시됩니다. 브라우저 창의 상단에 메뉴 수정 (상단 : 0 픽셀, 위치 : 고정;)

내 코드는 다음과 같습니다. 나는 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은

<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> 

자바 스크립트 (이 고정 메뉴를 만든다 (logo.png 메뉴는 브라우저의 고정 위로 위로 일 때 표시해야하는 것입니다) 사용자가 100 픽셀 아래로 스크롤 할 때 맨 위)

<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(); 
}