jquery .scroll change css

Question

I'm very new to jquery and am having a bit of an issue with changing css styles for scroll effects.

I have a div which at the load of the page I want to be fixed to top:75px, but once a user starts to scroll past 75px from top, I want to change it to position:fixed top: 0px.

For now I'm only able to get it to change on any scroll action, not wait till it reaches 75px from top.

My code so far is extremely basic as Im somewhat stuck on this particular part.

        $(window).scroll(function () { 
              $("#side_bar").css("position", "fixed").css("top", "0px"); 

            });

Ideally I'd really like it to be scrollable until the bottom of the #side_bar touches the footer, and then reverse the whole thing when scrolling back up to 75px from the top so that it changes back to position:static, top:75px.

Thanks in advance!

Michel Ayres · Accepted Answer · 2013-08-08 18:54:50Z

2

The jQuery Waypoints plugin lets you easily make sticky elements. They implemented that example by adding a sticky class (causing the element to be fixed) when you scroll to that element.

edited Aug 8, 2013 at 18:54

Michel Ayres

6,02511 gold badges67 silver badges97 bronze badges

answered Aug 18, 2011 at 20:46

jtbandes

119k38 gold badges244 silver badges282 bronze badges

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

1 Comment

Mike Over a year ago

stickies did EXACTLY what i was looking for!

mrtsherman · Accepted Answer · 2011-08-18 21:02:22Z

2

Something like this would do it for you. Note that unlike in your question you don't actually want it fixed at 75px. If that happened it would never scroll off the screen! You want it relative and then fixed once it would go off the screen.

//get the top of your sidebar based on its default position
var topOfSidebar = $("#sidebar").offset().top;

//when the window scrolls check to see whether it is about to go off screen. If so then switch to fixed.       
$(window).scroll(function() {
    var topOfWindow = $(window).scrollTop();
    if (topOfSidebar < topOfWindow) {
        $("#sidebar").addClass("sidebar2");          
    }
    else {
        $("#sidebar").removeClass("sidebar2");
    }
});

answered Aug 18, 2011 at 21:02

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

Comments

bigspotteddog · Accepted Answer · 2011-08-30 04:17:44Z

Here is a demo of another jquery plugin that takes care of this. The demo uses a shopping cart summary floating on the right that scrolls until it reaches a margin at the top of the page. The description of the plugin is as follows:

This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.

Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.

This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.

Demo: http://jsfiddle.net/y3qV5/

Plugin and source: https://github.com/bigspotteddog/ScrollToFixed

Usage:

$(document).ready(function() {
    $('#cart').scrollToFixed();
});

Collectives™ on Stack Overflow

jquery .scroll change css

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related