Loading...

Copy code

Permalink

Please tell us why you want to mark the subject as inappropriate. (Maximum 200 characters)

Private Message

From : guest

To :

Subject :

Content :

Type the characters you see in the picture below.

From : guest

To :

Subject :

Content :

Type the characters you see in the picture below.

Feedback

Email ID

Subject :

Comments :

Private Message

Type the characters you see in the picture below.

Attach files

Desktop Google Docs

Each Attachment size should not exceed 1.0 MB. Max no of attachments : 3

Loading User Profile...

guest

Response title

This is preview!

Attachments

()

Sign In

New to this Portal? Click here to Sign up

You can also use the below options to login

Login with Facebook
Login with Google
Login with Yahoo

jQuery
Plugins
UI
Meetups
Forum
Blog
About
Donate

All Forums
Recent Posts
Log In

Search jQuery

Search

jQuery Forum

Screen name:
mwestern

mwestern's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Last 30 days
Date Interval

From Date :

To Date :

Loading Chart...

Posts
Responses
PM

Show:

Expanded view
List view

Private Message

Making multiple divs appear or disappear when diff sections of site are scrolled to.
[2Replies]
- 14-Jul-2011 01:25 PM
- Forum: Using jQuery Plugins
I am trying to create a fixed crest at the top of my site that changes depending on where the viewer of the site scrolls to.

I found the following script/plugin on StackOverflow that works well for making one element fade in and fade out.

PART ONE:

function isScrolledIntoView(elem) {
   var docViewTop = $(window).scrollTop();
   var docViewBottom = docViewTop + $(window).height();

   var elemTop = $(elem).offset().top;
   var elemBottom = elemTop + $(elem).height();

   return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
   }

PART TWO:

// the element to look for
   var myelement = $('#bottom');
   // the element to show when the above is visible
   var mymessage = $('#friends');
   $(window).scroll(function() {
   if(isScrolledIntoView(myelement)) {
   mymessage.fadeIn('slow');
   } else {
   mymessage.fadeOut('slow');
   }
   });

I then duplicated part two and changed the variables to make a different div appear in this position depending on where the viewer was in the site but it did not work past the first transition. Please see the following link to get a better idea what I am trying to achieve.

http://www.butteryflow.com/jerry/index.html

Is there any way I can adjust the script to make it work with multiple transitions?

Thanks.

«Prev
Next »

Moderate user : mwestern

Forum