cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              - var headerClass = 'header', colorBg = 'bg'

header(class="#{headerClass}")
    nav
        a(href="#") Item 1
        a(href="#") Item 2
        a(href="#") Item 3
        a(href="#") Item 4
    div(class='#{colorBg}')
.wrapper
    .content
        h1.title Lorem Ipsum
        p.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat tempora, eveniet aperiam a consectetur, porro rerum voluptas molestiae omnis qui beatae. Sit unde aperiam iste minus dolores praesentium optio consectetur, magni voluptatum ex ut velit nam tenetur corporis omnis esse!
        p.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nihil iure, illum aliquam doloremque similique nobis maxime eligendi accusamus sit veniam, facilis, illo deleniti ut nesciunt optio blanditiis, repudiandae reiciendis?
            
        p.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nihil beatae, voluptatem quo laudantium perspiciatis sed ex placeat. Alias odit praesentium aliquam quam similique qui.
        p.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem itaque nostrum doloremque fugit iure maiores beatae nesciunt tempora fuga. Quasi doloremque impedit fugiat harum laboriosam molestias cum ipsa, fugit laborum earum facilis possimus perferendis inventore in aut rerum porro veniam aspernatur reprehenderit dolore tempora, tempore nemo officiis. Inventore delectus in, vel quos, quod ducimus iure.
            
          
!
            
              // Settings
$nav-height: 40px;
$link-color: white;

$nav-bg: #2A2A1E;
$colorBg: 'bg';

$header-image-url: 'https://goo.gl/jZh3X5';
$headerClass: 'header';
$header-bg-position: center;

// specific
.#{$headerClass}{
    background:{
        image: url(http://unsplash.it/1900?image=210);
        size: cover;
        position: $header-bg-position;
    }
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    nav{
        z-index: 10;
        position: relative;
        line-height: $nav-height;
    
        a{
            margin: 0 10px;
            color: $link-color;
            transition: .3s all ease;
        
            &:first-of-type{
                margin-left: 0;
            }
        
            &:last-of-type{
                margin-right: 0;
            }
        
            &:hover{
                opacity: .7;
            }
        }
    }    
    .#{$colorBg}{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background: $nav-bg;
    }    
}

// General
body{
    font-size: 22px;
    line-height: 1.3;
    font-family: Roboto;
    
    h1{
        font-weight: bold;
        font-size: 2.5em;
        line-height: 2;
    }
    
    p{
        margin-bottom: 10px;
    }
    
    a{
        text-decoration: none;
    }
}

nav{
    max-width: 1300px;
    margin: 0 auto;    
}

.wrapper{
    background: white;
    
    .content{
        max-width: 1300px;
        margin: 0 auto;
        padding: 30px 0;
    }   
    
    p{
        padding-bottom: 5px;
    }
}
            
          
!
            
              $(document).ready(function () {
    'use strict';
    // variables
    var windowHeight = $(window).height(),
        // setttings
        colorBg = 'bg',
        headerClass = 'header',
        headerHeight = windowHeight * 0.6, // = 60vh
        navHeight = 40, // no px here
        // time savers
        body = $('body'),
        background = $('.'+headerClass + ' ' + '.'+colorBg),
        header = $(headerClass);
        
    /* 
     * set height of body to something big, 
     * so that scroll can happen
     */
    body.css({
        'min-height': windowHeight * 3
    });

    $(window).resize(function () {
        // set header height and min-height
        header.css({
            'height': headerHeight,
            'min-height': navHeight
        });

        // set body margin, so header does not overlap content
        body.css({
            'margin-top': headerHeight
        });

        // reduce opacity to see background image
        background.css({ 'opacity': 0 });

		$(window).scroll(function () {
            var scrollTop = $(this).scrollTop(),
                /*
                 * limit describes the point at 
                 * which opacity should be 1
                 */
                limit = headerHeight - navHeight; 
            
            /* 
             * remove as many pixels as have been scrolled down,
             * since min-height is set, the header will stop
             * at a height of navHeight
             */
            header.height(headerHeight - scrollTop);
            
            /* 
             * increase opacity of colorBg 
             * until navbar is all saturated
             */
            if (scrollTop <= limit) {
                background.css({ 'opacity' : (scrollTop/limit) }); 
			}
		});
	}).resize(); // trigger resize handles
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console