元素僅在特定高度可見

我是HTML，CSS和Javascript的新手。我有一個元素（導航點），應該只對我的頁面的特定部分可見。剩下的時間我寧願隱藏它。我嘗試使用媒體查詢：元素僅在特定高度可見

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

該段是在一個div中。那麼有可能讓這個div在其他div上徘徊時可見嗎？

來源

2017-09-29 Nightshade

請同時包含HTML和javscript。 –

首先在您的媒體查詢中使用vh和vw不起作用。按照定義100vh是查看您網站的設備的視口高度的100％。這意味着min-height: 200vh媒體查詢將僅適用於其視口爲2x比設備視口本身更高的設備。沒有什麼比自己高兩倍，除非它是0，所以這個媒體查詢永遠不會生效。

這就是說，我希望你能說清楚你的意思是段和你正在努力完成什麼。你們是不是要......

隱藏NAV-點當客戶端的視高度沒有達到一定的值？一個特定的DOM 元素作爲<p>或<div>這樣上
隱藏NAV-點？
隱藏導航點當用戶有滾動過去了一定的門檻？

要回答第二種情況，以及有關在另一個鼠標懸停時隱藏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'元素。親自嘗試一下，讓我知道它是如何工作的！

來源

2017-09-29 07:28:35 Misacorp

Misacorp，這不適合我。按部分我的意思是另一個分區。基本上我想讓我的navdots只在該div中顯示。我寫了一個jQuery代碼，它不完美，但工作一點點。 – Nightshade

$（document）.ready（function（）{（「。container1」）。hide（）; //最初隱藏您的div var topOfOthDiv = $（「。fourth」）。offset（）。top; var bottomOfOthDiv = $（「＃fifth」）。offset（）。top; $（window）.scroll（function（）{ if（$（window）.scrollTop（）> topOfOthDiv && $（window）.scrollTop ）（//。滾動通過另一個div？） $（「。container1」）。show（200）; （）; }）; }）; – Nightshade

根據您的代碼判斷，您希望'.container1'顯示用戶滾動到「.fourth」時隱藏「.container1」的任何其他情況。你的代碼看起來很好，但如果你的頁面上有'.fourth'或'.container1'多個實例，你會遇到問題。如果你想要一個解決這個或其他改進，你能提供你的代碼的其餘部分，例如作爲一個工作Codepen演示。 – Misacorp

元素僅在特定高度可見

回答

相關問題