Text Fester sichtbar nur innerhalb eines div

Es gibt einen Code, wie das ist (vereinfacht):Text Fester sichtbar nur innerhalb eines div

<style> 
.contentblock{ 
background-color:green; 
} 
.thereisaproblem{ 
background-image:url(image.png); 
background-attachment:fixed; 
} 
.fix{ 
position:fixed; /* text is centred too if thats important*/ 
} 

</style> 
<body> 
    <div class="thereisaproblem" id="id1"> 
    <div class="fix"> Fixed text </div> 
    </div> 

    <div class="contentblock"> 
    Website content 1 
    </div> 

    <div class="thereisaproblem" id="id3"> 
    <div class="fix"> Another fixed text </div> 
    </div> 

    <div class="contentblock"> 
    Website content 2 
    </div> 
</body>

I "Fixed Text" müssen nur mit der ID 1, und "Ein weiterer fester Text" in einem div sichtbar sein nur in einem div mit id 3 sichtbar sein. " Wenn ich es einfach durch position: fixed versuchte, überlappte sich der Text in beiden divs. Mit z-index kann nur verhindert werden, dass 3 in 1 sichtbar ist und umgekehrt Texte können im falschen div angezeigt werden. Gibt es eine Lösung, um fixed wie Effekt aber mit Text nur in einem div zu machen? Es wäre am besten, nur html/css zu verwenden, aber wenn jscript/jquery benötigt wird, dann ist es in Ordnung.

gibt es Link zu jsfiddle

Basicly, wenn Sie die jsfiddle überprüfen, möchte ich anderen Text sichtbar an der Stelle des ersten sein, wenn Sie in ein anderes div nach unten scrollen. Sie können das Problem ignorieren, dass fester Text oberhalb von soliden blauen divs liegt.

Quelle

2016-05-02 The Sorter

ID-IDs dürfen NICHT mit Zahlen beginnen. Könntest du auch welche? Ich habe es dreimal gelesen. Ich verstehe immer noch nicht, was dein Ziel/Problem ist. Wenn Ihr IDS Nummern haben muss, dann muss Ihr CSS Zugriff wie folgt haben -> [id = '1'] – Chayemor

Ich habe jsfiddle hyperlink hinzugefügt. Das Problem ist nicht in Ids, aber ich habe sie geändert, nur um es richtig zu machen.Das Ziel ist ein fester Positionstext, oder einfach nur wie Text mit fester Position, der oben auf dem Bildschirm sichtbar ist. –

Ich habe versucht, Position: relativ zu .thereisaprblem Klasse und dann den dritten Div-Text hinzuzufügen erscheint in Ordnung. Siehe JS Fiddle: https://jsfiddle.net/gkhsrwtb/9/ –

Jetzt verstehe ich.

CSS-Lösung

.thereisaproblem{ 
    position:relative; 
} 

.fixed{ 
    position:absolute; // FIXED IS RELATIVE to window 
         // ABSOLUTE is relative to first positioned parent 
}

JAVASCRIPT SOLUTION

ich mit jQuery veröffentlichen werde, aber es ist nicht necesssary, kann es genauso gut mit einfachen genützt werden altes Javascript.

Der gesamte Code tut, ist, wenn der Benutzer 100px von oben gescrollt hat dann versteckt es, was div die Klasse hat oben (in Ihrem Fall ist das, was Sie mit # 1 hatte), und zeigt die div mit der Klasse Boden. Ansonsten tut es das Gegenteil. Sie müssten sehen, welche Entfernung Sie am besten nutzen, um Ihren Zweck zu erfüllen.

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > 100) { 
    $('.top').hide(); 
    $('.bottom').show(); 
} 
else { 
    $('.bottom').hide(); 
    $('.top').show(); 
} 
});

In Bezug auf CSS:

.contentblock{ 
    position:relative; 
    z-index:2; 
} 
.fixed{ 
    position:fixed; 
    z-index:0: 
} 
.bottom{ 
    display:none; 
}

Beachten Sie, wie zunächst die div (dritte div) in der Anzeige keine ist so dass nur die erste div sichtbar ist.

<div class="thereisaproblem top" > 
    <div class="fixed"> 
    Fixed text visible in first div 
    </div> 
</div> 

<div class="contentblock"> 
Website content 

</div> 

<div class="thereisaproblem bottom"> 
    <div class="fixed"> 
    Fixed text visivle in third div 
    </div> 
</div> 
<div class="contentblock">Webs content 2</div>

Quelle

2016-05-02 18:58:36 Chayemor

Ich habe es mit der Jquery-Lösung arbeiten. Vielen Dank! –

Ohne die tatsächlichen Positionen für Ihren fixierten Text zu definieren, wird immer top: 0; left: 0; des nächsten Elternteils verwendet, um eine position: relative; zu haben. Das Definieren der Position wird Ihr überlappendes Problem beheben. Die Funktionalität, die Sie für die Eingabe von Text in bestimmten divs benötigen, hängt von der ID ab und erfordert javascript/jquery oder sogar PHP.

Quelle

2016-05-02 17:25:50

Text Fester sichtbar nur innerhalb eines div

Antwort

Verwandte Themen