How to make a sticky slider remain functional as page scrolls

1

I have a slider at the top of my page. This slider allows user to change date range for data which then triggers updates to graphs.

https://sabahatpk.github.io/

Since there are so many graphs, it made sense to allow slider to move with page scroll so user does not have to go all the way back to the top to change dates with slider.

So I made the slider have position: sticky .

Problem: when slider scrolls over other HTML elements, it becomes “invisible” to mouse input. So if there is another HTML element under it, and I try to click on slider, the mouse selects the HTML element under it instead.

position: sticky is newer so there are not a lot of questions about this online and especially not for elements that have to be dynamic like a slider.

I found these:

  1. How can I make a div stick to the top of the screen once it’s been scrolled to?
  2. https://www.sitepoint.com/community/t/fixed-div-always-on-top/4547
  3. https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46

But none of them answered my question completely. I did try updating the z-index with various values ranging from negative to positive but none worked.

index.html:

<div class="container">
      <div id="selections" class="row">
        <p id="loading"></p>
        <div class="col-md-12">
          <div id="slider"></div>
          <label
            ><span id="dateLabel1"></span><span id="dateLabel2"></span
          ></label>
        </div>
      </div>
<!-- more divs -->
</div>

style.css:

#selections {
  position: sticky;
  top: 0;
  background-color: #b2df8a;
}

Expected: as slider moves down with page scrolls, user should be able to continue to change slider values (and thereby update graphs).

Actual: as slider moves down, user unable to change slider values UNLESS there is no other HTML element overlapping with slider.

[I did [post](https://stackoverflow.com/questions/58612134/how-to-make-a-sticky-d3-slider-remain-functional-as-page-scrolls) this question in StackOverflow - in case it looks familiar to anyone - only because FCC site was down. No responses there so far but if you want to get points or reputation or badges, you can post your answer there].

2

Give #selections a positive z-index.

1 Like
3

Thanks @lasjorg. That worked! (But also, I’m sure I tried that…clearly I must not have saved or something equally dumb…frustrating). Thanks again!