Ask your JavaScript questions! Pay money and get answers fast! (more info)

Getting Scrollto / localscroll plugins to work the way i want JavaScript

  • SOLVED

Hi,

I'm trying to make a site where links slide you vertically up and down a page and horizontally to hidden content. It seems like scrollto ( http://flesler.blogspot.com/2007/10/jqueryscrollto.html ) will be a good solution for my intent, but I don't know javascript, and I don't know how to get the content to slide to the proper places.

This is the test site: http://embassylane.com/egojava/

All the code I am using is accessible through firebug.

The four top navigation links (about, support, learn, connect) should scroll to those sections such that when they are scrolled to the proper point, they look like the top section looks when you land on the page.

The horizontal links in each section represent hidden content that should be scrolled to horizontally. If you turn off javascript, you can click these links to see the content.

Finally, I would like the links currently being displayed to be black, not grey. For instance, when you land on the page, exit dance theater is black, but when you click the spelling bee link, exit dance theater is grey, and spelling bee is black. Same goes for all links in the sections below...

Answers (2)

2011-05-24

Christianto answers:

Hi James,

Did the container you want to slide on demo is div element with fixed position and contain id "banner"?

If true, did you want to slide it when user scroll to bottom or up so it will result in fixed position on user browser but with animation (in this case at the top of user browser) ?


Christianto comments:

Please try this code, include jquery on your site..

jQuery(document).ready(function($) {
$('body > div:first').css({position:'absolute',top:0});
$(window).bind('scroll', function(e){
if(typeof(window.pageYOffset)=='number') {
topoff = window.pageYOffset;
} else {
topoff = document.documentElement.scrollTop;
}
$('body > div:first').stop(true,true).delay(1000).animate({top:topoff},1000);
});
});

Let me know if this works..


james p comments:

Hi, I tried posting this reply earlier, so apologies if this appears twice.

Thanks for your answer Christianto - I added the code to the site, you can see it here:
http://embassylane.com/egojava/

It is a neat effect, but not what I want to achieve. My question has two parts:
1. When links are clicked, the page slides to specific points to display the content. I'm attaching one mockup image here, but on my 'discourse page' I will try to post mockups of how the page should display when other links are clicked.
2. When you are looking at the content of a link (say, the 'spelling bee' link) I want that link to appear black, not grey.

That's what I am trying to achieve.....

Thanks,

J