Divが下にスライドしてスクロールダウンした後に消える

Question

Quoraと同じ方法で消えるアングルダウンボタンをクリックしてdivを表示する方法を知りたいと思います：自宅から回答をクリックするとページを閉じると、回答の最後にある終了ボタンをクリックするか、十分に長い時間スクロールすることで消えるようにすることができます）。

画像説明するために：

をだから、基本的には角度ダウンdiv要素は、より多くの情報を明らかに滑り落ち、製品のボタンをクリックした場合、私は、要約した製品のリストを持っています（ダウンシフト次の製品、オーバーラップなし）、このdivは終了ボタンとQuoraスタイルのスクロールによって消えます。

質問がありましたらお知らせください。

乾杯！ ピエール

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>