0
私はウェブサイトを作っていて、1つの効果で非常に問題があります。ブラウザウインドウの幅には線があります。固定されています（位置は固定されています）。そして、その上に小さな領域があります。効果のポイントは、その行に連絡した後、一部のコンテンツを「消去」する必要があることです。その上の領域はすべてのブロックではなく、私によって特定されています。たとえば、パディングなどがある黄色のブロックがあります。また、緑色の小さなブロックにテキストやイメージがあります。その行の上に、それは緑のない黄色のブロックでなければなりません。私は相対的な位置決めとz-インデックスを使ってこの問題を解決しようとしました。しかし、私はそれがどのように得ることができないのか想像することはできません。もしそれが1つのブロックだったら、それは簡単だと思います。 私はあなたに簡単な例を示しました。見てください。 ここでは理解を深めるための写真があります。あなたのすべてのウィンドウであることを想像してください。下にスクロールすると青いブロックが消えます。青いブロックのみ。 Picture."Erasing"行HTML
body{
margin:0px;
padding:0px;
}
.main{
background-color:#FF6600;
padding:200px 0px 0px;
}
.fix{
position:fixed;
background-color:#FF6600;
border-bottom:2px solid black;
height:200px;
width:100%;
top:0px;
left:0px;
z-index: 2;
}
.container{
padding: 50px;
background-color: yellow;
}
.block{
background-color: green;
}
.big_pic{
z-index:2;
position:relative
}
.absolute{
position:absolute;
top: 70%;
z-index: 1;
}<div class="main">
<div class="fix">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.</p>
<div class="container">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, pulvinar semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.
<img class="big_pic" src="http://katyaburg.ru/sites/default/files/pictures/krasota_prirody/krasivye_cvety_rozy_kartinki_foto_05.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, pulvinar semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.
Nullam dui libero, gravida id dui ac, pellentesque gravida justo. Quisque id dolor non nunc scelerisque varius a malesuada felis. Duis aliquam malesuada tortor, quis laoreet lacus vestibulum ut. Sed a vestibulum nunc, in maximus magna. Donec vel ante in nisi volutpat venenatis quis sit amet purus. Nunc eget posuere tortor. Donec in mi lectus. Mauris iaculis aliquet orci, at condimentum ligula bibendum et. Cras egestas metus a pellentesque malesuada. Etiam et imperdiet arcu, nec gravida massa. Sed maximus, lorem a dignissim faucibus, lorem neque laoreet elit, ut scelerisque augue ex et odio. Suspendisse ut pretium magna, sed elementum neque. Donec efficitur lectus vitae erat gravida fringilla et vel ante. Sed consectetur, odio vel venenatis mattis, nisl felis dapibus quam, eget ultrices augue nisi quis sapien.
</div>
からボーダーを削除する必要がスニペットを作成してください – tmslnz
どうもありがとうございました – becquerel
持っA jQueryを見てくださいdocsは 'offset'、' position'、 'detach'はhttp://api.jquery.comです。あなたは 'scroll（' $（window）.on（ 'scroll'、function（）{...}） '）を聞いて、固定divの下端を削除したい要素の下端と比較する必要があります。緑の要素の位置が固定された要素の位置よりも小さい場合は、緑の要素を「切り離し」、それに何が必要なのかを行います。 – tmslnz