Change div css when user scrolls past it, using jQuery

Question

When a user scrolls past a div I need it's css changed to position:fixed. Much like what is done here: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/ but with just plain jquery, without the plugin.
The div must also stop scrolling once the user scrolls to another div.
For example:

<div id="stuff"></div>
<div id="this"></div>//must start scrolling with user when user reaches it.
<div id="footer"></div>// when #this reaches within say, 10px, of #footer it must stop in it's current position, in order to prevent overlap

I'm assuming i'd use .scroll() and .css(), but I have no idea where to go from there.

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

I noticed in your answer #this disappears abruptly once you get down to #footer. I've tweaked your answer to allow for #this to stick to #footer and scroll which is a lot smoother.

My demo uses slightly different markup and is a little more verbose so jump over to jsFiddle and check it out.

Demo: jsfiddle.net/Marcel/e9hyw/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 21, 2013 at 11:37

Marcel

28.1k9 gold badges73 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcel Over a year ago

Please note, my demo uses the throttle/debonce plugin which is recommended when the scroll() event is being utilised.

Atom Vayalinkal · Accepted Answer · 2013-04-21 09:10:19Z

3

This is what finally worked for me:

    jQuery(document).ready(function() {
    var topOfrel = jQuery("#this").offset().top;
    var topOffooter = jQuery("#footer").offset().top - jQuery(window).height(); 
    var topOffootero = topOffooter ;
    var boxheight = jQuery(window).height() - 130;//adjusting for position below
    jQuery(window).scroll(function() {
        var topOfWindow = jQuery(window).scrollTop();
        if (topOfrel < topOfWindow && topOffooter > topOfWindow) {
            jQuery("#this").css("position", "fixed").css("top", "130px").css("overflow","auto").css("height", boxheight + "px");

        } else {
            jQuery("#this").css("position", "static");
        }
    });
});

answered Apr 21, 2013 at 9:10

Atom Vayalinkal

2,7328 gold badges30 silver badges38 bronze badges

Comments

Silvertiger · Accepted Answer · 2013-04-21 08:06:52Z

0

the page you reference uses jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">

and also has other Javascript included on it that we don't see

incidentally you can view it here:

http://imakewebthings.com/jquery-waypoints/waypoints.js
http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js

the functions he uses can be seen there, but i would not say it's a quick answer. Based on his scripts he attaches a listener to the element after the page loads:

<script type="text/javascript">
    $(document).ready(function() {
        $('.my-sticky-element').waypoint('sticky');
    });
</script>

If you have specific questions ask away, but i doubt many will go through explaining the entire script for you.

answered Apr 21, 2013 at 8:06

Silvertiger

1,6802 gold badges19 silver badges33 bronze badges

2 Comments

Atom Vayalinkal Over a year ago

I was looking for jquery only option, with no add-on.

Silvertiger Over a year ago

The central difference here is that the code you are looking for will either be included inline as a large block, or saved in a separate javascript file (or addon) of your own. Technically his is not not an addon but just his code to perform what you're looking for. You're looking for a listener on a Dom element that tracks current y position and if less than 0 on y set an absolute position. again, the best answer I could give was to look at the functions in his "addon" and see if you can replicate just the part you want.

Collectives™ on Stack Overflow

Change div css when user scrolls past it, using jQuery

3 Answers 3

Demo: jsfiddle.net/Marcel/e9hyw/

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo: jsfiddle.net/Marcel/e9hyw/

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related