Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stu Cowley
Stu Cowley
26,287 Points

Transparent Sticky Nav - Unwanted Top White Space

Hi everyone,

I would post this question up on Stackoverflow, but the responses I usually get are way to difficult to understand, and I always get great answers from this great community!

So I have a site I'm building that features a jumbotron of a photograph as the background and a fixed transparent navigation menu that changes to a solid color. I am using the StickJS plugin (http://stickyjs.com/). The plugin that Dave McFarland in the Using jQuery Plugins course.

I have included the script and it works great apart from this rather annoying problem where the transparent background navigation menu is no longer visible as StickyJS seems to have added padding to the top of the page instead of fixing to the top (if that makes sense).

I have included a screen grab of the problem I'm trying to describe.

Screen grab of issue.

Here is the code that I am using: site.js

$(document).ready(function() {
    $(".main-header").sticky({ 
        topSpacing: 0
    });
});

style.css

.main-header,
.sticky-wrapper {
   padding: 0;
   margin: 0;
   height: 88px;
   z-index: 9999;
}

.main-header {
   background: transparent;
   border-bottom: 1px solid rgba(255,255,255, 0.4);
   padding: 25px 0;
   -webkit-transition: 1s;
      -moz-transition: 1s;
           transition: 1s;
}

.is-sticky .main-header {
   background: rgba(0,0,0, 0.84);
   border-bottom: none;
}

.main-header img {
   -webkit-animation: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
   opacity: .7;
}

.main-header img:hover {
   opacity: 1;
}

.main-header nav {
   float: right;
   margin-top: 9px;
}

.main-header nav ul li {
   display: inline;
   margin-right: 30px;
}

.main-header nav ul li:last-child {
   margin-right: 0;
}

.main-header nav ul li a {
   font-size: 1.03em;
   color: rgba(255,255,255, 0.7);
   text-decoration: none;
}

.main-header nav ul li a:hover {
   color: rgba(255,255,255, 1);
}

Any help or advice anyone can give me on fixing this will be greatly appreciated!

Thanking you all in advance

Stu :)

Stu Cowley
Stu Cowley
26,287 Points

Hi Pete,

Thanks for that but the site was working perfectly fine before I added sticky nav, but I cannot find any rogue paddings or margins. I just went and created a quick navbar and some text and it without any real styles and it is still adding this padding. Might have to have a look at the source code.

2 Answers

benfarnham
benfarnham
17,073 Points

So am I correct in saying that the menu is going to be fixed from the start? You are just adding a solid background once you scroll a certain amount of pixels? I don't know if you would need an entire plugin for something that small. :)

Either way, from what I can see, it looks like sticky isn't being called right (I can see you called it right according to the code you linked but there may be some other variable we aren't seeing) and your .main-header element has a 'static position'. Honestly, you could style your .main-header with pure CSS and give it a fixed class then, when you want to add a solid BG, add a class with a wee bit of jQuery.

You could do: 

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    height: 88px;
    z-index: 9999;
    /* Add transitioning for easing effects if you want and don't forget prefixes! */
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

and then create an additional class for the solid background like so: 

.main-header.solid-bg {
    background: #fff;
    color: #333;
}

Then you can add or remove the class dynamically with jQuery: 

$(window).scroll(function(){
    var scrollPos = $(window).scrollTop();

    if (scrollPos >= 200) {
        $('.main-header').addClass('.solid-bg');
    } else {
        $('.main-header').removeClass('.solid-bg');
    }
});

And you have a lot less code than needed for your sticky plugin :)

Stu Cowley
Stu Cowley
26,287 Points

Hey Ben,

Thanks for this! I had a play around and I managed to get this working nicely! I also found that is I add:

.sticky-wrapper {
   position: absolute;
   top: 0;
}

It would fix the problem!

Thanks again,

Stu :)

Pete Cass
Pete Cass
16,656 Points
Pete Cass
Pete Cass
16,656 Points

I'm presuming your site was fine before you added the sticky nav plugin?

I would recommend using inspect element on chrome to see where this padding is coming from. Then you can override it in your css.