Autor
Carsten Appel

Mit diesem kleinen Tool zur Conversion Optimierung kannst du ein HTML Element ganz einfach „festkleben“. Du siehst das Beispiel hier im Blog. Jeder Blogartikel enthält eine Autorenbox die sich an den oberen Bildschirmrand fixiert sobald sie den Bildschirm verlassen würde.

Dazu nutzen wir etwas Javascript und CSS sowie jQuery als Javascript Framework.
Mit der Eigenschaft „position“ können wir Elemente fixieren oder aus dem HTML Content herausnehmen und wo anders darstellen.

HTML / CSS Code

<div class="scoll" id="scollbox">		
	<div class="autorbox">
		<div class="h4">Autor</div>
		<div class="pic"><img ></div>
		<div class="h2">Carsten Appel</div>
		<div class="link"><a href="" class="btn btn-danger">mehr</a></div>
		
	</div>
</div>

<style>
.blogcontent .container {font-family: roboto}
.scoll {position: absolute; top:0px ; left: -250px; right: auto; bottom: auto; }

.blogcontent .h4  { color: #666}
.blogcontent .h2  { font-weight: bold}

.autorbox {text-align: center; position: relative; top}
</style>

Javascript Code

<script>
var elementPosition = jQuery('#scollbox').offset();
jQuery(window).scroll(function(){
        if(jQuery(window).scrollTop() > elementPosition.top){
              jQuery('.autorbox').css('position','fixed').css('top','0');
        } else {
            jQuery('#scollbox').css('position','absolute');
            jQuery('.autorbox').css('position','relative');
        }    
});
	
</script>

Die Variable elementPosition erhält einmalig den Wert wo es sich zum Scriptstart im Abstand zum Top-Bildschirm befindet.
Sobald der User scrollt wird über einen Funktionsaufruf die gespeicherte Position mit der aktuellen Position verglichen. Sollte der User mit unserem Element aus dem Bildschirm gerade verlassen wird die Eigenschaft von „absolute“ auf „fixed“ gesetzt.
Wenn der User wieder hochscollt und unsere Box wieder an der Originalstelle ist schaltet das Script wieder auf die Ursprungseinstellung.
Hinweis: Das übergeordnete Element unserer Scrollbox muss auf „Position:relative“ gesetzt werden.

Warum bei uns die Autorenbox links steht

User nehmen gewisse Bereiche intensiver wahr als andere Bereiche. So ist es problematisch wichtige Dinge rechts zu platzieren. „Bannerblindness“ nennen wir dieses Phänomen. Der User denkt, dass alles Werbung ist was rechts des Content steht. Deshalb haben wir die Autorenbox bzw. später auch andere Elemente (dynamische Landingpages) auf die wichtige linke Seite platziert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Starte mit dem ConversionLetter

Tutorials, Checklisten, Buchtipps, Fallstudien u.v.m. jeden Monat gratis erhalten