Set Div Position to Fixed When Scrolled to Position - jQuery

Question

I am working with a right sidebar that contains three sliders aligned vertically. I would like to have the sidebar's position to be fixed when I scroll down to 200 pixels. Here's my code so far:

$(document).ready(function() {
    window.onscroll = function() {
        if (window.pageYOffset >= 200){
            $('.col-right').css({position: 'fixed', right: '490px'});
        }
    }
}

Nothing happens when I use this code. It detects that I am scrolling but it doesn't set the CSS properties to the "col-right" class, which is the sidebar. Am I doing this right?

Solution 1

OK, I figured it out. I changed $ to jQuery and everything works. Here is my working solution:

jQuery(document).ready(function(){
    window.onscroll = function() {
        if (window.pageYOffset >= 200){
            jQuery('.col-right').css({position: 'fixed', right: '490px', top: '40px'});
        }
        else {
            jQuery('.col-right').css({position: '', right: '', top: ''});
        }
    }
});

Solution 2

replace:

.css({position: fixed, right: 490px});

with

.css({position: 'fixed', right: '490px'});

strings should be quoted!