CSSまたはjqueryで指定された要素の先頭に要素の高さを設定します

Question

jqueryに、別の重複する要素の上端の位置に基づいて擬似要素の高さを動的に設定する方法はありますか？

たとえば、ヘッダーと2番目の要素が重複しているとします（これは変更できません）。ヘッダーの下部を設定することができます：透明度を使用してシームレスな背景が2番目の要素の先頭から始まる場所を終了します。オーバーラップは明らかに色が暗くなります。

下の例では、ヘッダーの高さは80pxですが、擬似要素はelement2の上端（たとえば、40px）に達するまでしか伸びません（ただし、これはdiffスクリーンサイズで変わります）。結果は、ヘッダーの全バックグラウンドとなり、element2は同じ色になります。

CSS例

.site-header { 
    background-color: transparent; 
    width: 100%; 
    height:80px;  
} 

.site-header:after { 
    background:rgba(251,75,4,0.6); 
    width: 100%;  
    z-index-1; 
} 

.element2{ 
    height:500px; 
    background:rgba(251,75,4,0.6); 
    width:100% 
} 

HTML

<header> 
OVERLAPPING 
<element2> 

目的は要素2の開始、重複なしにヘッダの先頭からのシームレスな色です。擬似要素でない場合は簡単ですが、プラグインを操作しようとしているので、html、つまり擬似要素を制御できません。ここで

Answer 1

は、使用してそれを行うことができる方法である::after

body { 
 
    margin: 0 
 
} 
 

 
header { 
 
    background-color: transparent; 
 
    width: 100%; 
 
    min-height: 40px; 
 
    position: relative 
 
} 
 

 
header::after { 
 
    content: ""; 
 
    height: 500px; 
 
    background: rgba(251, 75, 4, 0.6); 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
div { 
 
    height: 500px; 
 
    width: 100%; 
 
    border: green solid 5px; 
 
    box-sizing: border-box 
 
}

<header> 
 
    lipsum 
 
</header> 
 
<div> 
 
    test 
 
</div>