一旦用户向下滚动页面150px，如何将图像显示为菜单项？

Question

我有一个水平菜单固定在页面顶部，并由以下列表构建：

<div id="menu">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">more info</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

目前，主菜单链接的最左侧有一个空白区域。 在用户向下滚动页面150px后，我怎么能在这个位置显示他们的徽标图像？

我想这是一个javascript和CSS的组合，很好，我只需要一个如何实现结果的路线图。 谢谢。

Answer 1

在您想要的区域放置徽标元素并为其提供样式。 将其设置为首先显示无。

将滚动侦听器附加到窗口。 检查页面是否从顶部滚动了150px。 如果它已将显示更改为阻止带有徽标的元素。 它如果没有更改元素，则显示为none，如果它是可见的。

Answer 2

如果你愿意的话，你可以用jQuery来做。 我们的想法是继续添加图像，然后使用JavaScript为图像添加一个hidden类（每当JavaScript关闭时都会显示图像），然后使用jQuery，添加或删除类hidden取决于滚动位置。

<div id="menu">
  <img src="path/to/logo.png" id="logo">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">more info</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

/* CSS */

.hidden {
    display: none;
}

// jQuery
$(function() {
    var logo = $('#logo');

    logo.addClass('hidden');

    $(window).scroll(function() {
        if( +$(this).scrollTop > 149 ) {
            logo.removeClass('hidden');
        } else {
            logo.addClass('hidden');
        }
    });
});

就像一个注释，如果你希望在JavaScript关闭的情况下始终隐藏图像，那么硬编码class="hidden"到HTML中。 启用JavaScript后，代码仍然可以正常工作。 这只是您希望页面在没有JavaScript的情况下使用vs的行为的偏好。

Answer 3

这里有一个小例子，你可以用jQuery在页面滚动上显示/隐藏元素。 希望这会有所帮助： http ： //jsfiddle.net/KWyS2/

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
       var scrollTop     = $(window).scrollTop();
        $('.addDistance').html(scrollTop);
        if(scrollTop >= 150 ) {
            $('.show-hide-me').fadeIn();
        } else {
            $('.show-hide-me').fadeOut();
        }
    })
})
</script>

<div class="show-hide-me"></div>
<div class="content"></div>
<p class="addDistance"></p>

<style text="type/css">
.show-hide-me {
    display:none;
    width:100px;height:100px;
    background-color:orange;
    position:fixed;
    top:0px;
    left:0px;
}
.content {
    height:10000px;
    background-color:fuchsia;
    width:10px;
}
p {
    position:fixed;
    top:0px;right:0px;
    border:solid 1px red;
}
</style>