Shrinking sticky header on scroll

  • Resolved 9metis

    (@9metis)


    9 years ago

    Firstly, congrats on such a fantastic theme! What I love about it is it’s so flexible.

    I managed to add a sticky header and now I want the header to shrink as you scroll down. Here is the CSS:

    header {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: fixed;
    left: 0;
    z-index: 999;
    background: transparent!important;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}

header .shrink {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: fixed;
    left: 0;
    z-index: 9999;
    background: #fff!important;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}
header.shrink #thelogo {
  display:none;
}

    And here is the Javascript code:

    jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
    });
});

    I enqueued the script in my child theme functions.php with:

    ‘function virtue_child_load_shrink_header() {

    wp_register_script( ‘shrink-header’, get_stylesheet_directory_uri() . ‘/js/shrink-header.js’, array(‘jquery’), ‘1.0’, true );

    wp_enqueue_script( ‘shrink-header’ );

    }
    add_action( ‘wp_enqueue_scripts’, ‘virtue_child_load_shrink_header’ );`

    There were no errors and when I scroll down, the logo disappears as intended. However, the header does not change in height from 200px to 50px (used a smaller number just for testing), and the background does not change to #fff.

    What am I doing wrong? Your help would be appreciated, thanks! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter 9metis

    (@9metis)

    Sorry, the website is https://www.donatomagi.com.

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    Hey,
    So I suggest changing the target to .headerclass

    There are other “header” tags in side of a post and page becuase of blog lists for example.

    Then in your css you have:

    header .shrink {

    and since you would be adding the shrink class to the header those shouldn’t have a space…

    I would recomend switching to this:

    .headerclass.shrink {

    I hope that helps,

    Kadence Themes

    Thread Starter 9metis

    (@9metis)

    Thanks, changing it to .headerclass instead of header and taking away the space between .headerclass and .shrink worked perfectly!

    Hi,

    I have problems with putting this in my childtheme. Can you post a step-by-step solution?
    What I did: I created a folder called “js” in my childtheme folder. There i put the file “shrink-header.js” with this content:

    jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
    });
});

    then i created a functions.php an put this in it:

    function virtue_child_load_shrink_header() {
wp_register_script( ‘shrink-header’, get_stylesheet_directory_uri() . ‘/js/shrink-header.js’, array(‘jquery’), ‘1.0’, true );
wp_enqueue_script( ‘shrink-header’ );
}
add_action( ‘wp_enqueue_scripts’, ‘virtue_child_load_shrink_header’ );

    last i put the stylecode in my style.css:

    header {
    width: 100%;
    height: 110px;
    overflow: hidden;
    position: fixed;
    left: 0;
    z-index: 999;
    background: #fff!important;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}

.headerclass.shrink {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: fixed;
    left: 0;
    z-index: 9999;
    background: #fff!important;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}
header.shrink #thelogo {
  display:none;
}

    what do i have to change now? I removed the blank in the stylesheet and renamed it to headerclass.shrink. But where else do i have to change this so it works? Right now it says that there is a problem with my functions.php:
    Parse error: syntax error, unexpected ‘.0’ (T_DNUMBER) in /var/www/web138/html/futureforms/wp-content/themes/FutureForms/functions.php on line 18

    Thanks,
    Dave

    Okay, I removed the ‘1.0’ in the second line of the functions.php, then the website works again. But no shrinking.
    The website is futureforms.de

    Dave

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Shrinking sticky header on scroll’ is closed to new replies.