Would like to know best way to make a fixed header for AT.

This method didn't work so well.
http://jasonglisson.com/creating-fixed-header-region-drupal-7/

Any help is appreciated. Thanks

Comments

saurabh.dhariwal’s picture

Here's your work around.

1. Add the below code in your js file:

        jQuery(document).ready(function(jQuery) {
                jQuery(window).scroll(function(){
                        var scrolled = jQuery(window).scrollTop();
                        // var scrolled = $(window).scrollBottom();
                        if(scrolled >= 183) {
                                jQuery('#block-system-main-menu').addClass('sticky-header');
                        } 
                        else {
                                jQuery('#block-system-main-menu').removeClass(' sticky-header');
                        }
                });
        });

2. Add the below code in your css file:

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

Let me know if you face any query/concern regarding this.

Thanks!

crutch’s picture

Yes, this helped me a great deal thanks so much. I ended up using this specific js and css for my case and then also had to do some work with the sticky table headers.

1. js

jQuery(document).ready(function(jQuery) {
                jQuery(window).scroll(function(){
                        var scrolled = jQuery(window).scrollTop();
                        // var scrolled = $(window).scrollBottom();
                        if(scrolled >= 1) {
                                jQuery('#header-wrapper').addClass('sticky-header');
                        } 
                        else {
                                jQuery('#header-wrapper').removeClass('sticky-header');
                        }
                });
        });
jQuery(document).ready(function(jQuery) {
                jQuery(window).scroll(function(){
                        var scrolled = jQuery(window).scrollTop();
                        // var scrolled = $(window).scrollBottom();
                        if(scrolled >= 1) {
                                jQuery('#breadcrumb-wrapper').addClass('sticky-bread');
                        } 
                        else {
                                jQuery('#breadcrumb-wrapper').removeClass('sticky-bread');
                        }
                });
        });

2. css

#admin-menu, #admin-menu .dropdown {
z-index: 99999;
}

.sticky-header {
left: 0;
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}

.logged-in .sticky-header {
left: 0;
background: #fff;
position: fixed;
top: 50px;
width: 100%;
z-index: 9999;
}

.toolbar-drawer .sticky-header {
left: 0;
background: #fff;
position: fixed;
top: 85px;
width: 100%;
z-index: 9999;
}

#breadcrumb-wrapper {
background: #fff;
}

.sticky-bread {
background: #fff;
left: 0;
position: fixed;
width: 100%;
top: 89px;
z-index: 9999;
}

.logged-in .sticky-bread {
background: #fff;
left: 0;
position: fixed;
width: 100%;
top: 139px;
z-index: 9999;
}

.toolbar-drawer .sticky-bread {
background: #fff;
left: 0;
position: fixed;
width: 100%;
top: 174px;
z-index: 9999;
}
crutch’s picture

Status: Active » Closed (works as designed)
saurabh.dhariwal’s picture

Sounds Great! Feel free to ping me anytime for any relative help/assistance. Would be ready to help :)

Thanks!

zwerg’s picture

Which js-file do you mean?

crutch’s picture

zwerg, I created a new js file named sticky-stuff.js and added it to the scripts folder in my theme folder. Then edited my theme.info file and added the line below so the js file is added to the page. The js file only contains the js from #2 above.

scripts[] = scripts/sticky-stuff.js

I have one minor quirk in that when initially scrolling it jumps slightly. Also, if a page has a specific height on a specific device and OS it will flicker back and forth. It's like it is 1px that can't decide whether to scroll or or not and so it flickers up and down real fast but this is only an edge case where the content and page is at a specific height on particular screen, particular browser and Mac. We need to address and fix this issue but is currently on bottom of list.

The css I use maintains the header sticky effect even while logged in and with or without shortcuts bar showing and keeps the breadcrumb static too.