元素仅在特定高度可见

Question

我是HTML，CSS和Javascript的新手。 我有一个元素（导航点），应该只对我的页面的特定部分可见。剩下的时间我宁愿隐藏它。我尝试使用媒体查询：

@media screen and (min-height:200vh) and (max-height: 600vh) 
{ 
.invisible{ 
    visibility: visible; 
    } 
} 

该段是在一个div中。那么有可能让这个div在其他div上徘徊时可见吗？

Answer 1

首先在您的媒体查询中使用vh和vw不起作用。按照定义100vh是查看您网站的设备的视口高度的100％。这意味着min-height: 200vh媒体查询将仅适用于其视口为2x比设备视口本身更高的设备。没有什么比自己高两倍，除非它是0，所以这个媒体查询永远不会生效。

这就是说，我希望你能说清楚你的意思是段和你正在努力完成什么。你们是不是要......

1. 隐藏NAV-点当客户端的视高度没有达到一定的值？一个特定的DOM 元素作为<p>或<div>这样上
2. 隐藏NAV-点？
3. 隐藏导航点当用户有滚动过去了一定的门槛？

要回答第二种情况，以及有关在另一个鼠标悬停时隐藏div的问题，我提出以下解决方案。不过，如果这不是你所得到的，我很乐意更新我的答案。

---

HTML：

<div class="container" id="my_segment"> 
    <div class="nav-dots"> 
    Navigation dots go here 
    </div> 
</div> 

在这里，我们分配my_segment id来，我们想隐藏在NAV-点的元素。请注意，每页只能使用一次唯一的id。

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

既然你是新的JS我试图保持这个例子简单。这只适用于在一个元素和上使用'悬停显示'行为的情况下，您只能在此容器中使用一个'nav-dots'元素。亲自尝试一下，让我知道它是如何工作的！