Как скрыть дочерний элемент при скролле, но показать его при наведении курсора на родителя?

Question

[Kulibintorg]

Коллеги, подскажите как скрыть дочерний элемент при скролле, но показать его при наведении курсора на родителя?

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

< div class="header">
< h3 class="header--name">Заголовок< /h3>

< ul class="header--menu">

< li>Самокат< /li>
< li>Велосипед< /li>
< li>Машинка< /li>
< li>Вертолёт< /li>
< /ul>

< /div>

header--menu -- нужно скрыть при скролле. Остался только заголовок, но при наведении на "заголовок", отображается header--menu.

Comments

[WapSter]

Событие scroll и hover на css, ну или события mouseenter mouseout

[Kulibintorg]

WapSter, добился результата скрола при достижении => 100 скрыть меню скрываетсяся, и при обратной прокрутке меню возвращается, заголовок остаётся. Родитель "заголовок" не реагирует на добавление нового класса для меню и не открывает скрытое меню.

[Aricus]

Kulibintorg, Тогда, получается в JS: события scroll и mouseover. При скролле скрываете меню, при mousover над заголовком - показываете.

[Kulibintorg]

Aricus, вот именно это и пытаюсь сделать. Как написать такой скрипт?

[Kulibintorg]

$(window).scroll(function() {
var header--menu = $('#header--menu').offset().top;
/*Если сделали скролл на 100px задаём новый класс для header*/
if(header--menu > 100){
$('header--menu').addClass('header--menu-none');
} else{
/*Если меньше 100px удаляем класс для header*/
$('header--menu').removeClass('header--menu-none');
}

});

Этим скриптом скрыл меню. Как добавить в него mouseover?

[Aricus]

Kulibintorg, А в чём проблема? Вроде, всё просто:

$('.heading').mouseover(function(){
    $('#header--menu').removeClass('header--menu-none');
});

[Kulibintorg]

тут проблема в том, что дочерний элемент скрыт, а когда на родителя кликаю, дочерний элемент не понимает что к нему обращаюсь. Или я что-то не понимаю.

[Kulibintorg]

< div class="header">
< h3 class="header-name">Заголовок < /h3>

< ul class="header--menu">
< li>Наименование 1 li>
< li>Наименование 2 li>
< li>Наименование 3 li>
< li>Наименование 4 li>
< /ul>

< /div>
< /div>

/*CSS*/
.header--menu.header-none{
display: none;
}

.header--menu.header-active{
display: block;
}

если "header" scroll > 100 добавить к "header--menu" класс "header--menu.header-none", но если навести курсор над "header-name", применить класс "header--menu.header-active".

вроде все просто... но не работает.

[Kulibintorg]

Aricus, Спасибо тебе! Большое! Получилось!