Das Sticky Teaserbox Element basiert auf dem NATURE Theme Element und ist kein Feature des 0.1 Theme, kann aber durch Template-, SCSS- und Javascript-Anpassungen selbst eingebaut werden.
Legen Sie unter Templates ein neues Template an und wählen ce_cthemes_teaserbox.html5 aus. Am besten benennen Sie das Template um, z. B. in ce_cthemes_teaserbox_sticky.html5.
Ersetzen Sie den Template-Inhalt durch folgenden Code:
<div class="<?= $this->class ?> block sticky-teaserbox full-height"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
<div class="inside">
<?php $this->block('content'); ?>
<?php if ($this->addImage): ?>
<figure class="image_container float_above" style="background-image:url('<?= $this->picture['img']['src'] ?>')"></figure>
<?php endif; ?>
<div class="content">
<?php if ($this->headline): ?>
<<?= $this->hl ?>>
<?php if($this->page != ""): ?><a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?php endif; ?>
<?= $this->headline ?>
<?php if($this->page != ""): ?></a><?php endif; ?>
</<?= $this->hl ?>>
<?php endif; ?>
<?= $this->text ?>
<?php if($this->page != ""): ?>
<div class="pageLink">
<a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?= $this->pageText ?></a>
</div>
<?php endif; ?>
</div>
<?php $this->endblock(); ?>
</div>
</div>
Platzieren Sie nun jeweils ein Element vom Typ Teaser Box (unter Contao Themes) und wählen das eben angelegte Template aus.
Navigieren Sie zur Dateiverwaltung, bearbeiten die custom.scss unter zeroOne/scss und fügen folgenden SCSS-Code ein. Ggf. müssen Sie die Seite mit Strg + F5 neuladen oder den Skriptcache leeren, damit die Änderungen greifen.
.ce_ct_teaserBox.sticky-teaserbox {
padding: 0;
.content {
width: 50%;
margin-left: 50%;
padding: 80px 200px 80px 80px;
}
.image_container {
display: none;
width: 50%;
background-size: cover;
height: 100%;
background-position: center;
position: absolute;
}
.inside {
height: 100vh;
align-items: center;
h1, h2, h3, h4, h5, h6 {
width: 100%;
text-align: left;
padding: 0;
}
.pageLink {
width: 100%;
}
}
p {
font-size: 18px;
}
.pageLink a {
@extend .btn;
}
}
.sticky-container {
position: relative;
.sticky-column {
position: absolute;
width: 50%;
height: 100%;
padding-top: 0;
content: "";
left: 0;
top: 0;
.sticky-column-background {
background: center center/cover no-repeat;
background-image: inherit;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 100vh;
z-index: 10;
@for $i from 1 through 20 {
&:nth-of-type(#{$i}) {
z-index: #{$i};
}
}
}
}
}
@media (max-width: 1280px) {
.ce_ct_teaserBox.sticky-teaserbox .content {
padding: 20px 80px;
}
}
@media (max-width: 960px) {
.ce_ct_teaserBox.sticky-teaserbox {
.content {
padding: 20px 40px;
}
p {
font-size: 16px;
}
}
}
@media (max-width: 600px) {
.sticky-container .sticky-column {
display: none;
}
.ce_ct_teaserBox.sticky-teaserbox {
.content {
width: 100%;
margin: 0;
padding: 20px;
}
.image_container {
display: block;
width: 100%;
position: relative;
height: 300px;
}
.inside {
height: inherit;
}
}
}
Fügen Sie folgendes JavaScript im Layout unter Eigener JavaScript-Code ein. Unter jQuery muss noch jQuery geladen werden.
Alternativ können Sie auch eine Javascript-Datei anlegen und diese im Layout einbinden.
<script>
jQuery(document).ready(function($) {
if( $(".sticky-teaserbox").length > 0 ) {
$(".sticky-teaserbox").closest(".mod_article").removeClass("block");
$(".sticky-teaserbox").closest(".mod_article").addClass("sticky-container");
$("<div class='sticky-column'></div>").insertBefore(".sticky-teaserbox:nth-of-type(1)");
}
$(".sticky-teaserbox").each( function() {
var style = $(this).find(".inside > .image_container").attr("style").replace(/\"/g, "'"); // replace for ie11
$(".sticky-column").append('<div class="sticky-column-background" style="'+style+'"></div>');
});
})
</script>