Wie verhindert man, dass Inhalt über einen festen Hintergrundcontainer scrollt?

Ich möchte ein Bild oben haben, das nicht scrollt. Also habe ich den Container der Klasse fixedbg auf position: fixed gesetzt.Wie verhindert man, dass Inhalt über einen festen Hintergrundcontainer scrollt?

Aber dann möchte ich etwas Inhalt unter diesem Bild, das scrollt aber die schlug eine Wand, wenn Inhalt den Boden des oberen Behälters (fixedbg) erreicht.

Wie macht man das mit CSS?

In der aktuellen Situation fließt der Inhalt des scrollarea Containers gerade über die fixedbg.

.fixedbg { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: whitesmoke; 
 
} 
 

 
.scrollarea { 
 
    top: 200px; 
 
    position: relative; 
 
    height: 800px; 
 
}

<div class="fixedbg"></div> 
 
<div class="scrollarea"> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
</div>

Quelle

2017-11-04 Wieger

'traf ein wall' Sie die Scroll-Stopp bedeuten? –

@Temani Afif Ja. Ich möchte, dass der obere Teil des Containers "scrollarea" am unteren Rand des Containers "fixedbg" endet. So wie "eine Wand schlagen" ja. – Wieger

haben Sie versucht, den Code zu überprüfen. es ist bereits an die Wand gefallen. der Bildlaufbereich ist unmittelbar nach dem Fixedbg –

Ich denke, es keine CSS-Lösung ist. Sie können jQuery verwenden und einen Bildlauf erzwingen, wenn Sie ein bestimmtes Limit erreicht haben. Hier ein Beispiel:

$(document).scroll(function(e) { 
 
    if (($(".scrollarea").position().top - $(this).scrollTop() < 140)) { 
 
    $('html, body').animate({ 
 
     scrollTop: $(".scrollarea").offset().top-120 
 
    }, 200); 
 
    } 
 
});

body,html { 
 
margin:0; 
 
padding:0; 
 
} 
 

 
.fixedbg { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: whitesmoke; 
 
    background-image: url(https://lorempixel.com/400/200/); 
 
    z-index:9; 
 
} 
 

 
.scrollarea { 
 
    top: 200px; 
 
    position: relative; 
 
    height: 800px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fixedbg"></div> 
 
<div class="scrollarea"> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
</div>

Quelle

2017-11-04 08:01:12

Wenn ich die Bildlaufleiste greife kann ich immer noch den Inhalt unter dem oberen Bild scrollen. Also dieses Beispiel funktioniert nicht ganz. Scrollen mit Scripts zu deaktivieren oder entgegenzuwirken, ist (meiner Meinung nach) sehr schwierig. – Wieger

@Wieger ich weiß, dass 'es nicht ganz funktioniert'. Ich habe mich gefragt, ob das ist, was Sie erwarten, ich meine, ist das die Idee? Wenn ja, ich glaube nicht, dass es etwas in CSS gibt, das den Inhalt blockiert –

Ich denke, ich muss zustimmen und akzeptieren, dass es keine CSS-Lösung gibt. Ich denke, ich scrolle nur den Hintergrundcontainer zusammen mit dem Inhalt darunter. Außerdem werde ich deine Antwort akzeptieren. – Wieger

-1

Gerade z-index in Ihrem fixiertes Bild css, dann den Inhalt blättern von unter dem Bild hinzuzufügen. Überprüfen Sie das Snippet.

.fixedbg { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 200px; 
 
    z-index: 1; 
 
    background-color: whitesmoke; 
 
} 
 

 
.scrollarea { 
 
    top: 200px; 
 
    position: relative; 
 
    height: 800px; 
 
}

<div class="fixedbg"></div> 
 
<div class="scrollarea"> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
</div>

Quelle

2017-11-04 07:43:16

Ich möchte es nicht über oder unter es scrollen. Halten Sie einfach den Inhalt an, um unter oder über den Container zu scrollen. Wie eine Wand zu schlagen. – Wieger

im Grunde, was Sie wollen, wenn der Inhalt auf den unteren Rand des Containers kommt dann Inhalte aufhören zu scrollen. Also, dafür müssen Sie jQuery verwenden, das kann mit CSS nicht möglich sein. –

Ja, mit CSS. Oder vielleicht etwas, das den gleichen Effekt hat, die Wand zu treffen. Zum Beispiel habe ich versucht, einen (transparenten) "Füller" am oberen Rand des "scrollarea" Containers zu verwenden, aber dann müsste ich die Höhe dieses Füllers kennen oder berechnen, der variiert. – Wieger

-2

.fixedbg { 
 
    
 
} 
 

 
.scrollarea { 
 
    
 

 
position: fixed; 
 
    overflow: hidden; 
 
}

<div class="fixedbg"></div> 
 
<div class="scrollarea"> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
    <p>scrollarea</p> 
 
</div>

Quelle

2017-11-04 08:16:22

Sie sollten auf unhöfliche reaktionäre Antworten wie diese Pratik verzichten, es sollte auf StackOverflow nicht toleriert werden. – UncaughtTypeError

Wie verhindert man, dass Inhalt über einen festen Hintergrundcontainer scrollt?

Antwort

Verwandte Themen