Slider navigation fixed after scrolling

I am working on a new site for myself. When viewing a single portfolio item you are presented with a slider with sample images from that project. When you hover over that slider, the navigation appears allowing you to view the next or previous slider image.

Anyways, some of the images in the slider are quite long, so when a user scrolls down to view the entire image, I would like the slider navigation to remain fixed on the users screen, but stay within the slider.

I have tried a couple of jQuery solutions and I am able to get them working on items outside of the slider, but am struggling to get it to work on the slider nav inside the slider.

Any ideas?


I think you’re talking about things like scrollSpy which allow you to fix elements on the page as you scroll past them.

We’ll probably need to see an example of the page you’re describing to be able to help, a script like that will be needed to toggle the ui at switch points, but most of the work will be in the css of the different states.

My whole issue is that the element I want to fix after scrolling is created by a jQuery slider plugin.

Here is an example:

I want to fix the slider controls after the user starts scrolling, but they must stay inside the slider.

Thanks again