How To Make Logo Appear In Fixed Menu When Scrolling Down Page
on my website I have a menu that when you scroll down to 100 px the menu fixes itself to the top of the browser (top:0px; position:fixed;). However what I need is for a small logo
Solution 1:
Give your image an 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>
Solution 2:
This all you need?
var logo = $('#menu li:first-child img');
if (y >= 100) {
header.addClass('fixed');
logo.show();
} else {
header.removeClass('fixed');
logo.hide();
}
Post a Comment for "How To Make Logo Appear In Fixed Menu When Scrolling Down Page"