(CSS) A little Slideshow issue

[edonian]

I’m using Chris Coyier’s “Simple Auto Playing Sideshow” for my layout. The slideshow is working perfectly, but it’s overlapping my navigation and some of the content. When you scroll, you’ll see the red navigation pop out. I want the navigation under the slideshow.

You can see it here: http://codepen.io/edonian/pen/pRzXVv

The Slideshow code:

#slideshow {
  position: relative;
  display: block;
  width: 100%;
}

#slideshow > div {
  position: absolute;
  display: block;
}

When I use position: static in the second part of the slideshow code it’s positioned the way I want but the animation of the slideshow becomes wacky. I know I’m missing some code to stop this from happening, I just don’t know what.

Any help would be greatly appreciated!

[Shikkediel]

There’s a flicker that would need to be solved when scrolling but this is one way of placing it at the bottom:

#slideshow {
  padding-bottom: 58%;
}

That’s an aspect ratio of 2160/3720 = 0.58 for giving images with width: 100% the correct “volume” to fit inside the slideshow…

AKA the padding-bottom trick.

[edonian]

Oh wow, it worked! I never would have thought of that… I’ve been at this for like 4 hours straight!

My gosh, thank you so much, Shikkediel! <3

Regarding the flicker, what do you mean? Do you mean the navigation turns red too soon? If that’s what you mean then yes, I’m currently trying to figure that one out as well.

Or maybe you’re saying the navigation isn’t as smooth when it sticks as you scroll. I’m trying to figure that one out, too.

[Shikkediel]

No trouble, just one of those things that’s handy to know about.

Regarding the flicker, what do you mean?

I think the latter bit, it doesn’t seem to be switching the “sticky” part smoothly when it’s at the bottom of the header. I’ll have another look as well.

Edit – try changing this line:

var a = $("header").offset().top;

To this:

var a = $("nav").offset().top-$("p.title").outerHeight();

[edonian]

I’ll definitely keep that little trick in mind for next time. :)

Regarding the sticky navigation, I’m using Mark Senff’s version.
His codepen.

It’s basically creating a clone of the navigation and sticking as you scroll. It was the only version simple enough for me to understand in order to use the effect.

Edit: Thanks! I’ll try that now!

[edonian]

Ah man… that’s perfect! It worked. Thank you!!

Could you explain how that worked? I’m still trying to learn and understand jQuery. The nav part I understand but this following code:

.top-$("p.title").outerHeight();

How would you know to attach that after .top?

[Shikkediel]

It’s a nice little plugin. I think you might be using a slightly different layout though.

When you don’t subtract anything, the change will happen when the nav element reaches the top of the page. I just subtracted the height of the top element, so that the switch would happen slightly earlier (when it reaches the bottom of that element)…

By the way, outerHeight() will include the padding. But usually height() is enough to get the element’s dimension.

[edonian]

Ah, I see. Thank you!

[Author]

Posts