Показать плавающую панель навигации при прокрутке

Я использую blogspot и хотел именно такую ​​плавающую панель навигации:

http://apairandasparediy.com/

Как видите, при прокрутке плавающая панель навигации показывает, как она скользит вниз.

Все, что я знаю, это сделать панель навигации:

<div id="floating-nav-content">
   <div class="floating-nav">
      <ul id="menu-floating-menu" class="menu">
         <li>...</li>
         <li>...</li>
         <li>...</li>
         <li>...</li>
      </ul>
   </div>
</div>

Но остальная часть jQuery или javascript мне до сих пор неизвестна. У меня тоже есть поиск, но они не учат именно тому, что я хочу.

Я только новичок в jQuery, и я до сих пор не знаю, как это реализовать.

Ваша помощь очень ценится.


javascript navigation jquery css blogger
person kaynewilder    schedule 01.05.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Это должно делать то, что вы хотите. (при условии, что вы уже включили библиотеку jQuery)

    <script type="text/javascript">
        $(document).scroll(function() {
            if ($(this).scrollTop() == 0) {
                $("#floating-nav-content").slideUp(400);
            } else {
                $("#floating-nav-content").slideDown(600);
            }

        });
    </script>

CSS также важен, потому что он помещает панель навигации в фиксированное положение вверху вашей страницы.

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        #floating-nav-content {
            top: 0;
            width: 100%;
            height: 20px;
            background-color: #000;
            position: fixed;
            display: none;
            color: #FFF;
            padding: 5px;
        }
    </style>

И, конечно же, HTML. Я разместил все выше и ниже в теге body.

    <div id="floating-nav-content">
        Content
    </div>
person Chris Hessler    schedule 01.05.2015
comment
Очевидно, что здесь не хватает некоторых стилей по сравнению с вашим примером, но я уверен, что вы можете понять это сами;) Удачи - person Chris Hessler; 01.05.2015
comment
спасибо! но проблема в том, что когда страница загружена, по умолчанию отображается плавающая панель навигации. как его скрыть и он будет отображаться только при прокрутке вниз? - person kaynewilder; 01.05.2015
comment
Используйте дисплей: нет; свойство в вашем CSS. кроме того, если по какой-либо причине это не сработает (а должно!), вы можете решить эту проблему с помощью $(#floating-nav-bar).hide(); в верхней части вашего скрипта. - person Chris Hessler; 01.05.2015
comment
ой, я забыл. теперь он работает отлично. большое спасибо! - person kaynewilder; 01.05.2015
comment
как сделать, чтобы плавающая навигация отображалась только тогда, когда она достигает определенной точки на моей странице, скажем, когда я прокручиваю, и изображение заголовка моей страницы достигает вершины, тогда это будет время, когда будет отображаться плавающая панель навигации - person kaynewilder; 01.05.2015
comment
В зависимости от высоты вашего заголовка вы можете поиграть со значением scrollTop(). например: if ($(this).scrollTop() ‹ 220) - person Chris Hessler; 01.05.2015