Sticky Header

JavaScript

Exempel-script för sticky header.
Visa kod

$(document).ready( function() {

    $sticky = $('body.sitesmart-site-content .ssd-59, body.sitesmart-site-content .ssd-29');
    $('.ssd-59').parents('.pure-g-r').eq(0).addClass('ssd-59-wrapper');
    $('.ssd-29').parents('.pure-g-r').eq(0).addClass('ssd-29-wrapper');
    $body = $('.sitesmart-site-content');

});

$(document).scroll(function() {

    if ( $(this).scrollTop() > 30 ) {

        $sticky.parents('.pure-g-r').addClass('sticky');
        $body.addClass('sticky');

    } else {

        $sticky.parents('.pure-g-r').removeClass('sticky');
        $body.removeClass('sticky');

    }

});
 

CSS

Exempel-style för sticky header.
Visa kod

/**
 * Marginal för att tryck ned innehåll
 */

body.sitesmart-site-content {
    margin-top: 210px;
}

/**
 * .ssd-xx-klasserna byts ut
 */

body.sitesmart-site-content .ssd-29-wrapper,
body.sitesmart-site-content .ssd-59-wrapper {
    width: 100%;
}

/**
 * Transitions för sticky header
 *
 * .ssd-xx-klasserna byts ut
 */

body.sitesmart-site-content .ssd-29-wrapper,
body.sitesmart-site-content .ssd-59-wrapper,
body.sitesmart-site-content .ssd-59-wrapper * {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/**
 * .ssd-xx-klass byts ut
 */

body.sitesmart-site-content .ssd-59-wrapper {
    position: fixed;
    top: 109px;
}


body.sitesmart-site-content .ssd-59-wrapper.sticky {
    top: 0px;
    box-shadow: 0px 0px 20px #000;
}

body.sitesmart-site-content .ssd-59-wrapper.sticky .ssd-27 a img {
    max-width: 100px !important;
}

body.sitesmart-site-content .ssd-59-wrapper.sticky ul li a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body.sitesmart-site-content .ssd-59-wrapper.sticky .ssd-30 {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

body.sitesmart-site-content .ssd-29-wrapper {
    top: 0px;
    position: fixed;
}

body.sitesmart-site-content .ssd-29-wrapper.sticky {
    top: -109px;
}
 
DesignSmart - en del av SiteSmart

Denna sida och produktion av designmallar är ett samarbete mellan MediaVault International AB, SiteSmart Sales Sweden AB och våra designpartners. SiteSmart erbjuder webbsidor med CMS/Publiceringsverktyg, E-handelsverktyg och andra moduler samt relaterade produkter och tjänster för hemsidor. MediaVault International utvecklar de verktyg som marknadsföres av SiteSmart.

Kontakta oss nu

Bispmotalagatan 1 | 591 35 Motala
Telefon: 0141-20 25 40
E-post » info@sitesmart.se

Öppettider

Vår support har öppet helgfria vardagar 
08.00 - 17.00. Ring 0141-20 25 40 eller hitta information och filmer på » www.sitesmartsupport.se

Samtliga produkter under varumärket SiteSmart ® utvecklas av MediaVault International AB.

» Våra villkor

Copyright © 2015 SiteSmart, all rights reserved   |   » Sitemap   |   » Cookies