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

How can I display an image as a menu item once the user has scrolled down the page 150px?

本文关键字：图像 显示 菜单项 用户 滚动 150px      更新时间：2023-09-26

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

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

在你想要的区域为logo放置一个元素，并提供它的样式。一开始设置为none

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

如果愿意，可以使用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的情况下如何表现的偏好。

这里是一个小示例，如何使用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>
相关文章：