CODEWITHSUNDEEP
javascriptcssz-index
Early73
Early73

Reputation: 503

javascript floating sidebar z-index

I'm using javascript to have a sidebar stay visible as the page scrolls. the side bar only becomes fixed once the page scrolls to the top of its container. here is the code:

<script>
function moveScroller() {
  var a = function() {
    var b = $(window).scrollTop();
    var d = $("#featured-scroller-anchor").offset({scroll:false}).top;
var c=$("#featured-scroller-content");
if (b>d) {
  c.css({position:"fixed",top:"5px"})
} else {
  if (b<=d) {
    c.css({position:"relative",top:""})
  }
}
  };
  $(window).scroll(a);a()
}
</script>

This works great except that I also have a footer at the bottom of the page that I want to be visible infront of the sidebar. Currently the sidebar is displayed above the footer and I can't figure out how to change that.

I have the footer with a z-index of 999 and I tried setting the z-index of #featured-scroller-content to something less but that didn't work. the only thing that will work is if I set the z-index of the sidebar to -1 but then none of the links in the sidebar work anymore.

Upvotes: 1

Views: 533

Answers (1)

szajmon
szajmon

Reputation: 1665

Does the footer have position: relative?

Upvotes: 1

Related Questions