Sticky /Fixed Header WordPress

• SOLVED

I've got a site that while I could do a position:fixed on the header area (which includes the logo, and 3 right header widgets... this is a Genesis Child theme), I do have 2 widgets positioned above that are not part of the "header" and are not suppose to be sticky/ fixed.

The problem with the header is that currently, if I set it to fixed in CSS, that it will float/ stay sticky/ be fixed, but it won't stay at the top of the screen. If I add top: 0; to the CSS, then it will cover the ads.

Site is currently at - [[LINK href="http://webhost-solutions.net/diyp/"]]http://webhost-solutions.net/diyp/[[/LINK]]

I need it to stay at the top once you scroll your site down past the ad blocks, without any spacing problems.

Current CSS:


.site-header {
background: #fff;
border-bottom: 1px solid #ddd;
position: relative;
min-height: 60px;
width: 100%;
z-index: 999;

}

I'm wondering if i need to add the [[LINK href="http://imakewebthings.com/jquery-waypoints/"]]jQuery WayPoints[[/LINK]] to this?


(Don't worry about the messy header on the right... I'm working on that.)


Note: Says $5. I add extra rewards for FULL answers that don't have any flaws.

Answers (1)

2014-02-16

zebra webdesigns answers:

Hello Nile Flores

I have got the working solution which i Implemented for other developers for their clients site.
Please add the following to the genesis theme settings wp_footer()

<script>
jQuery(window).bind('scroll', function() {
if (jQuery(window).scrollTop() > 100) {
jQuery('.site-header').addClass('fixed');
}
else {
jQuery('.site-header').removeClass('fixed');
}
});
</script>

Now the class fixed will be added once the scroll region reached 100px
you can give css like

.site-header.fixed{
position:fixed;
top:0px;
}
you can use the trick to add another class to site container and make it margin-top 100px when scrolled down
so that the effect dont look like jumping.
Place your code inside media query, so that the sticky effect only applies to desktop mode.

If you need more clarifications I can help you.
My skype id: bhuvan530531
mail: [email protected]

---

zebra webdesigns comments:

The method uses default wordpress jQuery and effective too

---

Nile Flores comments:

Applied, but it's not working.

---

zebra webdesigns comments:

Hello Nile

Its working. Just add the following CSS.

.site-header.fixed{
position:fixed;top:0px;
}