如何使标志出现在固定菜单中，向下滚动页面 [英] how to make logo appear in fixed menu when scrolling down page

问题描述

在我的网站我有一个菜单，当你向下滚动到100像素的菜单修复本身在浏览器的顶部（顶部：0px;位置：固定）。

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;).

然而，我需要的是在菜单处于原始位置时（左上方菜单中的小标志不显示）（顶部：100像素;位置：相对）但是当用户向下滚动页面并且菜单固定到浏览器窗口的顶部时显示（top：0px; position：fixed;）

However what I need is for a small logo within the menu on the left to not display while the menu is in its original position (top:100px; position:relative) but appear when the user scrolls down the page and the menu fixes to the top of the browser window (top:0px; position:fixed;)

我的代码如下。我尝试做一个JSFiddle，但我不能在我的html文件中复制。

My code is below. I tried to do a JSFiddle but I cant dupicate what is in my html file.

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是菜单固定在浏览器顶部时需要显示的） / p>

HTML (logo.png is what needs to appear when menu is fixed top top of browser)

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

当用户向下滚动100像素时固定到顶部）

Javascript (this makes the menu fixed to top when user scrolls down 100px)

<script>
$(document).scroll(function () {
var y = $(document).scrollTop(),
    header = $("#menu");

if (y >= 100) {
    header.addClass('fixed');
} else {
    header.removeClass('fixed');
}
});
</script>

推荐答案

< img id =myImage>

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>

这篇关于如何使标志出现在固定菜单中，向下滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！