Response title
This is preview!
Making multiple divs appear or disappear when diff sections of site are scrolled to.
in Using jQuery Plugins
•
12 years ago
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.
Is there any way I can adjust the script to make it work with multiple transitions?
Thanks.
1