2016-02-03 4 views
1

На моей странице есть липкий навигатор, чья «липкость» отлично работает, однако поведение двух основных внутренних элементов * навигационной панели не отталкивается. 2 основными внутренними элементами являются logo и выдвижной навигатор (активируется при нажатии). Желаемое поведение выглядит следующим образом:JS: Есть ли способ вызвать функцию прокрутки в пределах функции щелчка или объединить оба?

  • логотип (в центре оранжевой панели) должны «скрыть» по умолчанию и только становятся видны, когда пользователь прокручивает вниз 80px из верхней (или свитки Шифрование до 80px из вверху) документа.

  • Логотип должен скрываться, как только пользователь прокручивает в пределах 80 пикселей вверху документ.

  • Логотип не должен быть видимым одновременно с активным навигационным меню; в тот момент, когда navbar неактивен, он должен снова стать видимым.

  • В отличие от логотипа значок навигационной панели всегда должен быть видимым, а
    как логотип, он должен быть липким.

В jsfiddle, все предполагаемого поведения играет, но только на свитке, а не по щелчку. то есть. После прокрутки более 80 пикселей логотип будет виден (это хорошо), но не скрывается, когда значок навигатора нажимается до активного состояния (если элемент nav уже не находился в активном состоянии). Эта проблема решается в момент прокрутки, но не в момент щелчка, что я и хочу.

Я не знаю, почему это происходит, это потому, что в то время как я позаботилась всех этих условий в $(window).scroll(function(), я не имею в $("#menu-opener").click(function() просто потому, что я не мог использовать scrollTop() там, ни я мог успешно объединить две функции.

Как же решить эту проблему, будь то объединение функций, вызов scrollTop() в функции click или что-то еще? Поблагодарили бы за любую помощь.

Pls отметить: в то время как я говорю «2 основные внутренние элементы навигационной панели», на самом деле я поместил логотип и выдвижную Navbar в отдельно дивы и хотели бы, чтобы оставаться таким образом

ответ

2

Так почему бы вам не использовать scrollTop?

не это ожидаемое поведение:

https://jsfiddle.net/91gxLvbb/4/

Вы можете проверить scrolltop с:

if($(window).scrollTop() > 80) 
+0

@ Jeroen да, спасибо, это ожидаемое поведение - по какой-то причине это замораживание на моем локальном хосте - я пытаюсь увидеть проблему прямо сейчас. –

+0

Да - работает и на локальном хосте, и сейчас! Благодарю. –

0

https://jsfiddle.net/91gxLvbb/6/

Я добавил #menulogo:

$("#menu-opener").click(function(){ 
    $("#menu-opener, #menu-opener-inner, #menu, #menulogo").toggleClass("active"); 
}); 

И в CSS:

#menulogo.active #logoflag{display:none} 

 Смежные вопросы

  • Нет связанных вопросов^_^