CODEWITHSUNDEEP
jquerycssscroll
Mike
Mike

Reputation: 463

jquery .scroll change css

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!

Upvotes: 0

Views: 9091

Answers (3)

jtbandes
jtbandes

Reputation: 118761

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.

Upvotes: 2

bigspotteddog
bigspotteddog

Reputation: 1447

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();
});

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39892

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");
    }
});

Upvotes: 2

Related Questions