I got some sections like:
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
What I try to do is, when I scroll in section1, it fades out and section2 fades in. When I scroll down in section2, section3 fades in and when I scroll up section1 fades in.
I tried that with this JS:
var lastScrollTop = 0;
$("#section1").scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(this).fadeOut();
$("#section2").fadeIn();
} else {
}
lastScrollTop = st;
});
var lastScrollTop = 0;
$("#section2").scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(this).fadeOut();
$("#section3").fadeIn();
} else {
$(this).fadeOut();
$("#section1").fadeIn();
}
lastScrollTop = st;
});
var lastScrollTop = 0;
$("#section3").scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
} else {
$(this).fadeOut();
$("#section2").fadeIn();
}
lastScrollTop = st;
});
But it just keeps scrolling normally without any fadeIn() or fadeOut().
Any way to fix this or any better ways to do it?
Have a look at https://scrollrevealjs.org/ it should do what you need. If i get it right.
There's excellent plugin called waypoints use it with animate.css and you're good to go.
$(document).ready(function () {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* .fade{opacity:0;} in css, Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
Related
I have this snippet that adds and remove a class to the navbar whenever I scroll up or down
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('.navbar.clickable-off').addClass('is--off');
} else {
$('.navbar.clickable-off').removeClass('is--off');
}
lastScrollTop = st;
});
At the time the script is working fine, but I would like to only trigger it after I scroll, for example, 10px up or down - instead of the current 1px
I am trying to transfer between display:none, and display:block. The div with the id #octopus-head is supposed to fade out when scrolling down, and back in when scrolling up, but right now it just pops in or out instantly.
Here is the javascript I am working with:
//sticky header scripts
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = jQuery('.scroll-height-setter').innerHeight();
jQuery(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 100);
function hasScrolled() {
var st = jQuery(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
jQuery('#octopus-head').removeClass('nav-down').addClass('nav-up').fadeOut(1000);
} else {
// Scroll Up
if(st + jQuery(window).height() < jQuery(document).height()) {
jQuery('#octopus-head').removeClass('nav-up').addClass('nav-down').fadeIn(1000);
}
}
lastScrollTop = st;
}
Display none cannot use transitions as there is nothing to transition from.
You could use setTimeout() to add a transition class that renders the div with opacity of zero and then switch classes to your final opacity 100%.
Or you could just always use opacity and never display none the div. It depends on what you actually need.
Here is a link to a fiddle I was looking at which does exactly what i'm looking for:
https://jsfiddle.net/mariusc23/s6mLJ/31/
Upon attempting to apply this for my own purposes I realized that it was not working at all. I came to the conclusion that it was the version I was using causing it not to work..
Not really a javascript/ jquery buff so I was wondering what precisely in this script causing it to not work with jquery 3.0.0-rc1 but instead with the older version jquery 1.10.2
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
Right now i have made the footer to appear when i scroll up and hide when i scroll down.
How do i make it appear when i am at the bottom of page?
https://jsfiddle.net/48az3u64/
// Hide Footer on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('footer').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight){
$('footer').removeClass('nav-up').addClass('nav-down');
} else {
if(st + $(window).height() < $(document).height()) {
$('footer').removeClass('nav-down').addClass('nav-up');
}
}
lastScrollTop = st;
}
See this fiddle https://jsfiddle.net/48az3u64/9/
I only added a function IsBottom() found from this post How do you know the scroll bar has reached bottom of a page
function IsBottom() {
return $(window).scrollTop() == ($(document).height() - $(window).height());
}
to add your nav-up class back when you scroll, and to disable your timer.
I strongly suggest not to use a timer for this kind of thing, since you are processing your function every quarter of seconds even if there haven't been any scroll. You should probably just call your hasScrolled() directly in the scroll event and use a debounce function to not fire it too much. Here is a link for more info on debounce
http://davidwalsh.name/javascript-debounce-function
Is there any way in JQuery to capture events scrolldown / scrollUp?
I tried this way:
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
But it does not capture the function of UP and DOWN, but the scroll whatsoever!
And I wanted so the scrolling mouse were activated the function were executed!
Is this possible?