Element to be visible only for particular height - html

Question

I am new to HTML, CSS and Javascript.
I have an element (navigation dots) that should be visible only for a particular segment of my page. The rest of the time I would prefer it to be hidden. I tried using media query:
#media screen and (min-height:200vh) and (max-height: 600vh)
{
.invisible{
visibility: visible;
}
}
The segment is in one div. So would it be possible to make this div visible while hovering on the other div?

Answer 1

First of all using vh and vw in your media queries is not going to work. By definition 100vh is 100% of the viewport height of a device viewing your site. What this means is a min-height: 200vh media query will only apply to devices whose viewport is 2x higher than the device viewport itself. Nothing can be two times higher than itself, unless it's 0, so this media query will never take effect.
That said, I hope you can clarify what exactly you mean by segment and what you are trying to accomplish. Are you trying to...
Hide the nav-dots when a client's viewport height doesn't meet a certain value?
Hide nav-dots on a particular DOM element such as <p> or <div>?
Hide nav-dots when a user has scrolled past a certain threshold?
To answer the second scenario and your later question about hiding a div while hovering on another I propose the following solution. However I'd be happy to update my answer if this is not what you were getting at.
HTML:
<div class="container" id="my_segment">
<div class="nav-dots">
Navigation dots go here
</div>
</div>
Here we have assigned the my_segment id to the element we want to hide the nav-dots on. Note that you can use a unique id only once per page.
CSS:
.container {
display: inline-block;
background-color: #FFCCAA;
}
.invisible {
visibility: hidden;
}
JavaScript:
// Find our element
let seg = document.getElementById('my_segment');
// Add a mouseover event handler to our element
seg.addEventListener('mouseover', function() {
// Find nav-dots inside our element
let nav_dot_elements = seg.getElementsByClassName('nav-dots');
// Remove the 'invisible' class
nav_dot_elements[0].classList.remove('invisible');
});
// Add a mouseout event handler
seg.addEventListener('mouseout', function() {
// Find nav-dots inside our element
let nav_dot_elements = seg.getElementsByClassName('nav-dots');
// Add the 'invisible' class
nav_dot_elements[0].classList.add('invisible');
});
Codepen demo
Since you are new to JS I tried to keep this example simple. This only works if you use the 'hover to display' behaviour on one element and you only use one 'nav-dots' element inside this container. Try it out for yourself and let me know how it works!