How to make a scrolling image that becomes sticky

Question

I have a Bootstrap navigation bar that is fixed in position and has a transparent background. Let's say it's 80px tall. Then in the body of my document I have an img that's around 1000px tall (the image is just set to width 100%). So what I want to happen is when the user scrolls up, the image scrolls up as it should, but then when it hits the point that only 80px of the image is showing, the image becomes fixed in position and remains the background of the navigation bar.

I'm not sure if it would be better to keep my current code:

<nav>

</nav>
<img>

Or if it would be better to make the navigation bar really tall with the image as a background and shrink the navigation bar and change the image offset as the scroll occurs.

Did you try http://stickyjs.com/ I guess it will meet your needs. let me know if it helps.. — Dilip Rajkumar, Nov 13 '15 at 22:19
@dilip-rajkumar yeah I wish I could use something like that, but this is a little more complicated — Alex, Nov 13 '15 at 22:43
Just add class with position fixed to the element on the desired scrolltop position. — damiano celent, Nov 14 '15 at 01:20
@Alex If the pic is 1000px height, do you want the whole pic scaled as nav background or just the last 80px? — damiano celent, Nov 14 '15 at 16:17

score 0 · Answer 1 · answered Nov 14 '15 at 16:45

0

I think i got it the way you want.

$(window).scroll(function() { 
if ($(this).scrollTop()> 500 ) { 
$('#menu').css('background-image', 'url(' +    "https:
//vincentloy.files.wordpress.com/2010/09/
tragic-1-city-skyscrapers.jpg" + ')');
$('#menu').css('position', 'fixed');

}  else { 
$('#menu').css('background', 'transparent');
$('#menu').css('position', 'relative');
};
});

http://codepen.io/damianocel/pen/ZbVNvq

Let me know if I have got this right, cheers.

answered Nov 14 '15 at 16:45

damiano celent

721
6
12

That almost works, but I wanted the Image to be parallax rather than just jumping into position and unfortunately, it's causing way too much lag – Alex Nov 16 '15 at 23:05

How to make a scrolling image that becomes sticky

1 Answers1

Linked