By nirad on

I want to make a sidebar block that scrolls along with the page using jQuery, as explained here: http://css-tricks.com/scrollfollow-sidebar/ and shown here: http://css-tricks.com/examples/ScrollingSidebar/ . The javascript that accomplishes this: 

        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

I put this javascript in a .js file, renaming "#sidebar" to the name of the block I want to make scroll, and I included the file in my theme's .info file: "scripts[] = sidebar.js" . That didn't do anything, so I also tried adding drupal_add_js('theme', 'path_to_theme_folder/sidebar.js'); to the pre-process function in my template.php file. That didn't work either. Is there something I'm missing?

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

maybe a region be introduced (#sidebar) rather than the block itself?

nirad’s picture

nirad commented

it can only apply to a whole content region, not an idividual block. works fine now. thanks.

-Nirad

twooten’s picture

twooten commented

Hi Nirad,

Glad you got this to work. It would be really nice if you'd explain what you did to make it work so that others can do the same thing.

Thanks!
Tim

Yuki’s picture

Yuki commented

Dear Nirad, Can you explain it step by step kindly???lot of thing not undersytanding...themes.info(i do no thave that file) where to put, how to link js file...please...

REMUU’s picture

REMUU commented

Here is the step by step explanation for ya:
1. use your FTP program or whatever program you use to see files on your server and find the folder for your theme you are currently using. Assuming you are using a custom theme/customizing your own theme, it should be located in your sites/all/themes or sites/URL/themes directory. Within this themes directory, look inside the directory of your current theme.
2. If you are using a custom theme for example, look in sites/all/themes/foo (foo is your custom theme...very original). In this folder you should find a file named "foo.info"
3. In this file look for something like "scripts[] = ....." underneath that, put a line like "scripts[] = JSFILEWITHSCROLLCODE.js"
4. create the "JSFILEWITHSCROLLCODE.js" and put in the correct directory that you reference in the line of code above ^^
5. be sure to edit the code to include the correct region you want to scroll and then clear your cache
6. enjoy!

That may have been a little confusing but I tried to explain it in the simplest way I could.

I recently figured out a way to create this effect while also adding a limit to the scrolling (it will stop once the top of the window reaches a certain point down on the page). here is the code I used:

$(function() {
            var offset = $("#ID-FOR-REGION").offset();
// Replace #ID-FOR-REGION with the region you want to put the scrolling effect on. for example, I used #sidebar-right
            var topPadding = 30; 
// 30 is the distance you want the region to be from the top of the screen when it scrolls down
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top && $(window).scrollTop() < 700) {  
// 700 is a scrolling limit. once the top of the window reaches, 700, the region will stop scrolling. replace all instances of 700 with the number of your choice
                    $("#ID-FOR-REGION").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
					if ($(window).scrollTop() > 700) {
                    $("#ID-FOR-REGION").stop().animate({
							marginTop: 700
                    }); 
					} else {
						$("#ID-FOR-REGION").stop().animate({
							marginTop: 0
						});
                };
				} });
        });

This is really helpful if you want the region to stop scrolling downward when you reach a certain point on the page. The javascript may not be entirely clean. This was really my first time customizing javascript but I got it to work sufficiently. It'd be great to hear any suggestions you all may have on how to improve the code.
I hope this helps.

k4m1’s picture

k4m1 commented

Receiving errors on page regarding the offset.top function, stating its null or not an object. I copied your code and installed it properly in my .info file. The errors appear on IE but not on firefox, the region doesn't scroll tho either. Any idea what im doing wrong? I also tried the original code posted at the top too, still same thing.

Will Igetit’s picture

Will Igetit commented

I get the exaact same problem... I don't know why scroll top is not recognized..