Я пытаюсь добавить дополнительную строку меню под существующим header в теме WordPress. Я реализовал свое меню, также используя тег header, вставив код HTML (некоторые темы позволяют это сделать). Но это должно быть видно только тогда, когда ширина области просмотра меньше 1000 пикселей.
Я бы хотел сделать это с помощью медиазапроса, но проблема в том, что и мое меню, и существующее меню используют * Тег 1005 *, поэтому мое правило CSS будет скрывать оба меню ниже ширины области просмотра 1000 пикселей.
В любом случае, вот код, с которым я работал. Кто-нибудь что-нибудь замечает, почему это не работает?
function toggle_visibility(.scroll-nav-down) {
var screen_width = window.innerWidth;
if (screen_width <= 1000) {
// Screen is smaller than (or equal to) 1000px
var e = document.getElementById(.scroll-nav-down);
if (e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
} else {
// do something if it's larger
e.style.display = 'none';
}
Редактировать: Я действительно изо всех сил пытаюсь вернуться к работе с css. Я пытаюсь использовать решение Media Query, но у меня проблемы. Я думаю, что это вместо только. Но если я удаляю и изменяю его на, я испортил JavaScript, который мой друг написал мне некоторое время go. И да, я не в JavaScript вообще. Итак, вот весь код, может быть, это поможет решить мою проблему ... -> Я добавил часть только для изображения, чтобы продемонстрировать эффект.
Примечание : если вы измените css для "#headerdiv" на простой "header", а в последней строке JavaScript 'headerdiv "на простой" header " ', код работает как надо. Но не исчезает под 1000 пикселей.
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding-top: 40px;
}
#headerdiv {
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.scroll-nav-up {
top: -40px;
}
@media (min-width: 1000px) {
#headerdiv {
display:none;
}
}
main {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
) repeat;
height: 2000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var ScrollNav = function(elem, delta) {
this.m_Delta = delta;
this.m_LastScrollTop = 0;
this.m_Element = elem;
$(window).on("scroll", null, {ScrollNav: this}, this.OnWindowScroll);
};
ScrollNav.prototype.OnWindowScroll = function(e) {
var scrolledTop = $(window).scrollTop();
var Nav = e.data.ScrollNav;
if(Math.abs(Nav.m_LastScrollTop - scrolledTop) <= Nav.m_Delta) {
return;
}
if(scrolledTop > Nav.m_LastScrollTop && scrolledTop > $(Nav.m_Element).outerHeight()) {
$(Nav.m_Element).removeClass('scroll-nav-down').addClass('scroll-nav-up');
} else if(scrolledTop + $(window).height() < $(document).height()) {
$(Nav.m_Element).removeClass('scroll-nav-up').addClass('scroll-nav-down');
}
Nav.m_LastScrollTop = scrolledTop;
}
// HOW TO USE!
var scroll = null;
$(document).ready(function() {
// new ScrollNav('ZielElement', Delta);
scroll = new ScrollNav('headerdiv', 5);
});
</script>
<body>
<header id="headerdiv" class="scroll-nav-down">
This is your menu.
</header>
<main>
This is your body.
</main>
</body>
</html>