Sticky Header

#1
Heya,

I'm trying to copy the fixed header concept from DevKit to vanilla Freelancer and learn from it all.

I have copied the javascript file "devkit-fixed-header.js" to my vanilla Freelancer child theme and removed all 'devkit' prefixes.
So now I have a file "fixed-header.js" in my child theme - and I've cleaned this file up so all CSS class reference is also without the devkit prefix.

I found the CSS linked to any of these classes and copied them to my stylesheet:

.fixed-header.scrolled .site-header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

.admin-bar.fixed-header.scrolled .site-header {
top: 32px;
}

@media screen and (min-width: 64em) {
.site-header.devkit-fixed-site-header {
padding-top: 15px;
padding-bottom: 15px;
}
}

I'm now trying to add the correct code to functions.php and get it working.
I found reference in the DevKit files in design-init.php
Line 47 & 48.
I've tweaked and added these but obviously I still have much to learn here...

Sooo..
I've come this far!
Got any tips or advice?!! ;-)

Cheers!
 

eric

Administrator
Cobalt Apps Developer
#2
Hey Brett,

I just tested this out and it worked just fine. All I did was paste this into a scripts.js file inside my Custom Freelancer Child Theme:

JavaScript:
jQuery(document).ready(function($) {

    /* Function that adds a 'fixed-header' body class when the browser/device width is greater than a specified width
     * and removes the 'fixed-header' body class when it's that width or less. This "disables" the fixed design
     * for smaller browser/devices sizes to allow for greater vertical space in such viewing situations.
     * This is basically the JS version of CSS's @media query, for responsive design scenarios.
     */
    $(window).resize(function() {
        if (window.outerWidth > 1024 && !$('body').hasClass('fixed-header-disabled')) {
            $('body').addClass('fixed-header');
        } else {
            $('body').removeClass('fixed-header');
        }
    });
    
    /* Trigger the above .resize function to ensure the proper body class
     * is in place based on the browser/device width.
     */
    $(window).resize();
    
    var adminbar_height = $('#wpadminbar').outerHeight();
    var header_top_pos = $('.site-header').offset().top;
    var header_height = $('.site-header').outerHeight();

    /* Add/remove a 'scrolled' body class based on the scroll position of the web page
     * to properly enable/disable the fixed elements at the appropriate time.
     */
    $(function() {
        var scrolled = false;
        $(window).scroll(function() {
            // Add or remove the 'scrolled' body class based on scroll position, among other tweaks.
            if ($(this).scrollTop() > (header_top_pos + header_height - adminbar_height) && $('body').hasClass('fixed-header')) {
                $('body').addClass('scrolled').css('padding-top', header_height);
                $('.site-header').addClass('fixed-site-header');
                if (scrolled == false && true) {
                    $('.site-header').hide().fadeIn(200);
                }
                scrolled = true;
            } else {
                $('body').removeClass('scrolled').css('padding-top', '');
                $('.site-header').removeClass('fixed-site-header');
                scrolled = false;
            }
        });
    });

});
And then paste this into my style.css file:

CSS:
.fixed-header.scrolled .site-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.admin-bar.fixed-header.scrolled .site-header {
    top: 32px;
}
Note that I made sure to enqueue my scripts.js file in my functions.php file so it's called on the front-end.

Once I did this my header had a delayed fixed action on the front-end as expected.