Добавьте fadeOut в sticky.js.

Question

Добавьте fadeOut в sticky.js.

0

У меня есть сайт на одной странице с тремя разными разделами. Каждый раздел имеет подменю сверху.

При прокрутке я использую "sticky.js", чтобы придерживаться меню поверх веб-сайта, когда раздел касается верхней части страницы.

Как я могу угаснуть предыдущее меню до того, как другой застрянет.

Так же, как это происходит на этом сайте, на экране больше 1024 пикселей.

Заранее спасибо.

user2693896 02 май 2014, в 10:37

Источник

Теги:

javascript

jquery

css

sticky

fadeout

2 ответа

0

Было бы лучше, если бы вы объяснили, что вы сделали до сих пор..

Вы можете использовать свойство CSS-opacity для вашего подменю со значением по умолчанию 1. opacity: 1;

И в какой-то момент, когда вы прокручиваете, вы начнете уменьшать непрозрачность до 0 (это должно быть, когда ваше свойство css для предыдущего подменю top + height == next sub menu top)..

Проверьте этот jsFiddle: http://jsfiddle.net/KzGJr/2/

Bla... 02 май 2014, в 05:30

Ещё вопросы

emn178 · Accepted Answer · 2014-05-02T08-05-00.000Z

sticky.js добавляет имя класса is-sticky когда элемент переходит в липкий режим. Поэтому вы можете использовать его для переключения ваших свойств css. Я пишу пример для переключения двух меню по имени класса. http://jsfiddle.net/cwshp/

<div id="menu">
    <div id="static-menu">This is static menu.</div>
    <div id="sticky-menu">This is stick menu.</div>
</div>

CSS

html, body{
    height: 110%;
}

#menu {
    position: relative;
    width: 100%;
}

#static-menu {
    background-color: green;
}

#sticky-menu {
    background-color: red;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
.is-sticky #sticky-menu {
    opacity: 1;
}