一旦用戶向下滾動頁面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>