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

时间:2014-05-09 21:05:07

标签: javascript jquery html css

我有一个水平菜单,它固定在页面顶部,由以下列表构建:

<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的组合,很好,我只需要一个如何实现结果的路线图。感谢。

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

如果您愿意,可以使用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的行为。

答案 2 :(得分:0)

这是一个小例子,你可以用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>