You probably need something like this.
The trick is to add event listener for resize event, because otherwise your function will be called just once.
function toggle_visibility() {
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';
}
}
document.addEventListner('resize', toggle_visibility);
I am trying to add an additional menu bar underneath the existing header in a WordPress theme. I implemented my menu, also using the header tag, by inserting raw HTML code (some themes allow you to do so). But it should only be visible when the viewport width is less than 1000px.
I would love to do this with a media query, but the problem is that both my menu, as well as the existing menu use the header tag, so my CSS rule would hide both menus below a viewport width of 1000px.
Anyway, here’s the code I was working with. Does anyone notice anything, why this isn’t working?
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';
}
Edit: I’m really struggeling getting back to working with css. I’m trying to use the Media Query solution, but I’m facing problems. I guess it is the instead of only . But if I remove the and change it to , I’m messing up the JavaScript a friend wrote me some time ago. And yes, I’m not into JavaScript at all. So here’s the whole code, maybe it helps solving my problem…
-> I added the part only for the image, to demonstrate the effect.
Note: If you change the css for the “#headerdiv” to a simple “header” and in the last JavaScript line the ‘headerdiv’ to a simple ‘header’, the code is working as it should. But not disappearing under a 1000px widht.
<!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>
Consider using a media query listener to run JS at or below/above a certain width
