Div隨着按鈕向下滑動並在向下滾動後消失

Question

我想知道如何在點擊與Quora相同的方式消失的向下按鈕後顯示div：當您單擊家中的答案時頁面，您可以通過單擊答案底部的退出按鈕或通過向下滾動足夠長的時間使其消失）。

的圖像來說明：

所以基本上我都會有相關的產品清單與總結，如果你點擊的角度下一個產品一個div滑下透露更多信息的按鈕（減擋下一個產品，沒有重疊），這個div可以通過退出按鈕並通過向下滾動Quora風格消失。

如果您有任何問題，請告訴我。

乾杯！ Pierre

Answer 1

我做了一個簡單的例子，讓我知道你是否對此有任何疑問。

var classname = document.getElementsByClassName("open"); 
 

 
function toggleValue(current, first, second) { 
 
    return current === first ? second : first 
 
} 
 

 
function toggleFunc() { 
 
    this.style.letterSpacing = toggleValue(this.style.letterSpacing, '-10px', '-1px') 
 
    this.parentNode.style.maxHeight = toggleValue(this.parentNode.style.maxHeight, '1000px', '200px') 
 
} 
 

 
Array.from(classname).forEach(function(element) { 
 
    element.addEventListener('click', toggleFunc); 
 
});

p { 
 
    font-size: 1.2rem 
 
} 
 
article { 
 
    position: relative; 
 
    overflow: hidden; 
 
    transition: max-height 1s; 
 
    max-height: 200px; 
 
    padding: 2rem; 
 
    text-align: justify; 
 
} 
 
article header { 
 
    text-align: center; 
 
    font-size: 4rem 
 
} 
 
.open { 
 
    font-size: 2rem; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: calc(50% - 2rem); 
 
    font-weight: bold; 
 
    padding: 0.7rem 1.5rem; 
 
}

<article> 
 
    <header>Title</header> 
 
    <p>Lorem ipsum dolor sit amet, clita noluisse cum id, utamur propriae persequeris eu ius, cum cu praesent tincidunt. In vim volumus scriptorem. Timeam oportere nam eu, ad eum mucius bonorum. Cu sed indoctum repudiandae. Homero reprehendunt duo ad, no est 
 
    modus harum. Nibh offendit ut duo, iudico corrumpit eos cu. Et pri sint officiis elaboraret, mazim petentium sed no. Dicit nusquam insolens eu eos. Mel in mucius imperdiet, essent eligendi scribentur mei no. Amet gloriatur his cu, eam te simul cetero 
 
    gloriatur, an modus mediocrem his. Ad vel veri voluptaria instructior, at dicunt vidisse petentium duo. Cu sit purto reque ipsum, eos an omnis integre definitiones, an sit alienum offendit. Eu meis viderer has, hinc nostro aeterno est ex. Ridens denique 
 
    nam ut, vim solum fabulas ad, mel nisl dicunt qualisque no. Ut nec nemore tractatos persecuti, ea libris diceret ius. Ex probo diceret sea, detracto quaestio ullamcorper pro ex, labitur tractatos scripserit his te. Quas sanctus meliore te vel, ne 
 
    eos amet deleniti. Vix quando recteque ne. Id petentium expetendis cum, eos porro ridens ad. Vis solum definitiones ad, vix recteque scripserit temporibus id. Mel molestie maluisset cu, cu his falli aeque mundi. Vix nemore adipisci in. At qui nihil 
 
    deterruisset, eos nibh viderer no. Scripta euismod euripidis an vel, pri ea mutat virtute expetendis, wisi accusam est at.</p> 
 
    <button class="open">\/</button> 
 
</article> 
 

 
<article> 
 
    <header>Title</header> 
 
    <p>Lorem ipsum dolor sit amet, clita noluisse cum id, utamur propriae persequeris eu ius, cum cu praesent tincidunt. In vim volumus scriptorem. Timeam oportere nam eu, ad eum mucius bonorum. Cu sed indoctum repudiandae. Homero reprehendunt duo ad, no est 
 
    modus harum. Nibh offendit ut duo, iudico corrumpit eos cu. Et pri sint officiis elaboraret, mazim petentium sed no. Dicit nusquam insolens eu eos. Mel in mucius imperdiet, essent eligendi scribentur mei no. Amet gloriatur his cu, eam te simul cetero 
 
    gloriatur, an modus mediocrem his. Ad vel veri voluptaria instructior, at dicunt vidisse petentium duo. Cu sit purto reque ipsum, eos an omnis integre definitiones, an sit alienum offendit. Eu meis viderer has, hinc nostro aeterno est ex. Ridens denique 
 
    nam ut, vim solum fabulas ad, mel nisl dicunt qualisque no. Ut nec nemore tractatos persecuti, ea libris diceret ius. Ex probo diceret sea, detracto quaestio ullamcorper pro ex, labitur tractatos scripserit his te. Quas sanctus meliore te vel, ne 
 
    eos amet deleniti. Vix quando recteque ne. Id petentium expetendis cum, eos porro ridens ad. Vis solum definitiones ad, vix recteque scripserit temporibus id. Mel molestie maluisset cu, cu his falli aeque mundi. Vix nemore adipisci in. At qui nihil 
 
    deterruisset, eos nibh viderer no. Scripta euismod euripidis an vel, pri ea mutat virtute expetendis, wisi accusam est at.</p> 
 
    <button class="open">\/</button> 
 
</article>