使一個HTML頁面的一部分消失

我正在一個網站，我有一個標題部分佔用整個視口高度。要退出本節，查看器必須單擊一個按鈕，然後將其滾動到內容。該設計基於this website。使一個HTML頁面的一部分消失

但是，他們似乎已經'切'了頁面的頂部，因爲您離開該區域後無法向上滾動。這是如何實現的？是否有一些jQuery解決方案，還是全部是CSS？

來源

2017-04-10 Caspar B

這是一個混合物：按鈕的click() - 方法你爲你的頭display:none;股利，像$('#button').click(function(){$('#header').hide();});

來源

2017-04-10 08:02:15

如果你的元素訪問網站並檢查HTML，你會發現div沒有設置爲''display：none'''，而是完全消失。 – yarwest

結果將是一樣的...如果你將它設置爲隱形，你將無法再次向上滾動，或者我錯過了什麼？ –

那麼，你將無法再次向上滾動，但結果會略有不同，因爲隱藏該元素將允許您仍然修改它，而實際刪除它不會。 – yarwest

我已經採取了看網頁，我得出的結論是互動基於JavaScript。我爲什麼這麼想？嗯，非常簡單，因爲當滾動動畫結束時，介紹部分（<section id="intro"></section>）從文檔中消失。

這是使用jQuery的.remove()函數可以實現的。該函數從DOM中刪除元素及其子元素。 The documentation can be found here

這是用來退出這個功能的代碼，可能看起來大致是這樣的：

$("#intro").remove()

如果這種互動是使用CSS完成後，該元素就不會消失，而是會有了一些內嵌添加到元素的CSS（例如<section id="intro" style="display: none;">）

當然，這一切都是由滾動或點擊事件觸發的，看起來像這樣。

$("#intro").click(function(){ 
    // Code that changes element opacity as mentioned by Rahul Jain 

    // You can use 'this' as the selector since you are inside a function of that same selector 
    $(this).remove(); 
});

來源

2017-04-10 08:03:04 yarwest

在點擊鼠標滾輪，它們觸發這部分更改的不透明度從1到0而在完整的動畫的動畫，他們刪除永久使用

$('portion-selector').remove();

來源

2017-04-10 08:04:43

使一個HTML頁面的一部分消失

回答

相關問題