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。如果它已将显示更改为阻止带有徽标的元素。它如果没有更改元素，则显示为无可见。

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>

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

3 个答案: