Как я могу отобразить изображение как пункт меню, когда пользователь прокрутил страницу вниз на 150 пикселей?

Question

Как я могу отобразить изображение как пункт меню, когда пользователь прокрутил страницу вниз на 150 пикселей?

0

У меня есть горизонтальное меню, которое фиксируется в верхней части страницы и построено по следующему списку:

<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, что хорошо, мне просто нужна дорожная карта того, как добиться результата. Благодарю.

Presto 09 май 2014, в 23:47

Источник

Теги:

javascript

jquery

html

css

3 ответа

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 выключен, тогда в HTML-код hard-code class="hidden". Когда JavaScript включен, код будет по-прежнему работать одинаково. Это просто предпочтение тому, как вы хотите, чтобы ваша страница вела себя с vs без включенного JavaScript.

Josh Beam 09 май 2014, в 19:43

1

Поместите элемент для логотипа в область, в которой вы хотите, и укажите стиль. Сначала установите его для отображения.

Прикрепите прослушиватель прокрутки к окну. Проверьте, прокручивается ли страница на 150 пикселей сверху. Если он изменил отображение на блок с логотипом. Он, если не изменил элемент, чтобы отобразить его, если он виден.

Travis J 09 май 2014, в 18:14

Ещё вопросы

caramba · Accepted Answer · 2014-05-09T19-19-00.000Z

вот небольшой пример того, как вы можете показать/скрыть элемент на странице прокрутки с помощью 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>

это прекрасно работает для меня, спасибо.
@Престо, пожалуйста, рад, что это помогло! счастливое кодирование