Sticky Teaserbox

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.

Template anlegen

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>

Inhaltselemente platzieren

Platzieren Sie nun jeweils ein Element vom Typ Teaser Box (unter Contao Themes) und wählen das eben angelegte Template aus.

Styling

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;
        }
    }
}

Zusätzliches Javascript

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>

Beispiel