Scroll down event 5 times - javascript

So what I'm trying to make is changing a fixed background image 4 times ( one scrolldown - one image change) and after the fourth image is up, the div with the images becomes "relative" so I can scroll down to the rest of the content on the website (as well when I scroll up, the images become fixed again and change in a reversed consecutivity).
I decided to use this code, but I'm not sure how to make it work for my 5 scrolls
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$("#backroundimage").addClass("backgroundimage1"); //down scroll code
} else {
$("#backroundimage").removeClass("backgroundimage1"); //up scroll code
}
lastScrollTop = st;
});
A good example of the functionbility I'm trying to achieve is http://airnauts.com/, after all the scrolling to the top area is done, the website scrolls down to the rest of the content and vice-versa when scrolling up.

After reading the question again I think I understood what you wanna do (I can't open the link you gave).
The thing is that if you want just have a top section that changes its background on scroll you cloud write something like this:
$(document).ready(function(){
var numberofscroll = 0;
var lastScrollTop = 0;
$("#out").scroll(function(){
var st = $(this).scrollTop();
(st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
if (numberofscroll<6){
change_background(numberofscroll);
}
});
lastScrollTop = st;
});
Here a working example I made: https://jsfiddle.net/frqL0y6s/
If you want this 'top section' disapear after the last scroll, you cloud do:
$("#out").scroll(function(){
var st = $(this).scrollTop();
(st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
if (numberofscroll<6){
change_background(numberofscroll);
}
else{
$(this).remove();
}
});

you can try something like
var numberofscroll = 0;
$(window).scroll(function(event){
numberofscroll++;
if($(window).scrollTop() == $(window).height()){ // you reach to window bottom
if(numberofscroll == 1){
// first time scroll
}else if(numberofscroll == 2){
// second time scroll
}else ... so on till you reach to 5
}else{
}
});

Your code can't work because your var lastScrollTop can't egal to st because she is undefined. And more this first variable is useless. Just defined one variable in the loop and make your different test :
$(document).ready(function(){
st = 0;
$(window).scroll(function(event){
st = $(this).scrollTop();
if(st > 200){
test one;
}else if(st > 400){
test two
}else{
default
}
})
})

Related

Show div after scrollDown then scrollUp to top

I want to show hidden div after scrollDown then scrollUp to top. This means that after I scroll down and then scroll up to top, the hidden div is show.
This is my js, but it's just scrollDown.
$(document).scroll(function() {
let y = $(this).scrollTop();
if (y > 100) {
$('.latest_news').fadeIn();
} else {
$('.latest_news').fadeOut();
}
});
I don't know how to after scrollUp, that div show for me?
Thank you.
Sorry about my English.
$(document).scroll(function() {
if ($(this).scrollTop() === 0 && $(".latest_news").is(":hidden")) {
$(".latest_news").fadeIn();
} else {
$(".latest_news").fadeOut(); // remove this else block if you do not want hidden on every scroll down
}
});
I give you solution.
This is very simple.
You need to know scroll direction.
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (st > lastScrollTop) {
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
reference my blog: https://seunggabi.tistory.com/entry/JS-Browser-get-scroll-direction

Detect if user scrolls more than 20px no matter where it's on the page

Is it possible to detect if the user scrolls more than 20px wherever it's on the page??
I mean, in a one page design, I need to remove a class when the user scrolls more than 20px but not only from the top of the document.
Each time he opens a popup, a class is added to the popup in question, once the user scrolls, I would like to remove this class.
Repeat this function no matter where it's on the page.
My current code :
$(window , 'body').on('scroll', function() {
$('.navbar-collapse').collapse('hide');
$("#wrapper").removeClass('newsletter-opened');
$("#newsletter").removeClass('opened');
});
Thank you!
You can use jQuery for that.
With my solution, if user has scroll 200px when he come on your page if he scroll to top or bottom with minumum 20px of scroll your changes was called.
var userScroll = $(document).scrollTop();
$(window).on('scroll', function() {
var newScroll = $(document).scrollTop();
if(userScroll - newScroll > 20 || newScroll - userScroll > 20){
$('.navbar-collapse').collapse('hide');
$("#wrapper").removeClass('newsletter-opened');
$("#newsletter").removeClass('opened');
}
}
EDIT:
After look your jsFiddle, i know what you want, just check that :
Just define the scroll at the moment when popin is enable and make your job only when the popin has class opened
$(document).ready(function(){
$("a.open-newsletter").on( "click", function() {
$("#newsletter").toggleClass('opened');
userScroll = $(document).scrollTop();
return false;
});
$(window , 'body').on('scroll', function() {
if ( $("#newsletter").hasClass('opened') ) {
var newScroll = $(document).scrollTop();
if (userScroll - newScroll > 100 || newScroll - userScroll > 100) {
$("#newsletter").removeClass('opened');
}
}
});
});
Actually, the Scroll function will take effect on every pixel the page is scrolled, which is too heavy in terms of performance.
As a result, if you just take the difference between newScroll & userScroll, the result may be wrong sometimes (because the new and old scroll positions will be updated shortly as the page is moving along)
Therefore, we can just set a time interval which checks the scroll position every 250 milliseconds (this will both increase performance and give time for users to scroll more than 20px as your requirement):
var didScroll;
var lastScrollTop = 0;
var delta = 20;
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Return if they scroll less than 20px (delta)
if(Math.abs(lastScrollTop - st) <= delta)
return;
// Do what you want here
console.log("lastScrollTop: ",lastScrollTop, " - newScroll: ", st);
$('.navbar-collapse').collapse('hide');
$("#wrapper").removeClass('newsletter-opened');
$("#newsletter").removeClass('opened');
lastScrollTop = st;
}
EDITED VERSION BELOW:
(according to your fiddle, I deleted "use strict" and commented out the $('.navbar-collapse') & $('#wrapper'))
Would you mind trying this again (seems that some previous errors just prevented my code from executing)
$(document).ready(function(){
$("a.open-newsletter").on( "click", function() {
$("#newsletter").toggleClass('opened');
return false;
});
var didScroll;
var lastScrollTop = 0;
var delta = 20;
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Return if they scroll less than 20px (delta)
if(Math.abs(lastScrollTop - st) <= delta)
return;
// Do what you want here
console.log("lastScrollTop: ",lastScrollTop, " - newScroll: ", st);
//$('.navbar-collapse').collapse('hide');
//$("#wrapper").removeClass('newsletter-opened');
$("#newsletter").removeClass('opened');
lastScrollTop = st;
}
});

How to show and hide menu based on start and scroll

I have two menus on a page, I am trying to show the one when the page is loaded and the other when there is a scroll.
This is my page Link
I would like to show the white part when position is at the top
and the blue part when there is a scroll past the top position
This is what am trying presently
<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
// 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-bar-below op-page-header cf').addClass('banner include-nav');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('banner include-nav').addClass('nav-bar-below op-page-header cf');
}
}
lastScrollTop = st;
}
});//]]>
</script>
can some one please help its not working for me
You can just detect if the scroll is at the top of the page or not whenever scroll event fired. if yes, show white header, and vice versa
$(window).scroll( function() {
var scrollPosition = $(window).scrollTop();
if(scrollPosition === 0) {
//show white header
}
else {
//show blue header
}
}
Of course you have to make sure when page first load, it show the white one first (use css). since the code above won't run Until user do scroll (fire this event)
*EDIT
for this :
"and the blue part when there is a scroll past the top position"
you can try this plugin
http://stickyjs.com/
sample code for fix the menu at top position.
$(document).scroll(function() {
var y = $(document).scrollTop()
var header = $('.include-nav');
var blue-menu = $('.cf');
var screenHeight = header.height();
if (y >= screenHeight) {
blue-menu.css({
position : "fixed",
"top" : "0",
"left" : "0"
});
header.css("position", "relative");
} else {
blue-menu.css("position", "relative");
}
});

How increase height while scroll down but don't decrease when scroll up?

I'm in a One Page project, and I need a DIV to increase the height while scrolling down, but when scrolling up, keep the height, and does not decrease.
I'm using JQuery with the following code:
$(function(){
$(window).scroll(function() {
var $broca = $('#corpo');
var st = $(this).scrollTop();
$broca.height( st - 600 );
if( st == 0 ) {
$broca.hide();
} else {
$broca.show();
}
}).scroll();
To detect if the scrolling is going down, or up, you can always store the last value of the scroll, and then compare it to the scrollTop() at the event handler:
var lastVal = 0;
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st > lastVal){
// Is scrolling down... Increase height of div
} else {
// Is scrolling up, do nothing...
}
lastVal = st;
});

jQuery Add/Remove Class when Scrolling

I'm trying to create the following functionality with conditionals...
User scrolls down (120px for example) from the top of the screen, the HTML class 'state-nav-is-hidden' is added to the HTML tag.
When he gets to the BOTTOM after scrolling the class 'state-nav-is-visible' replaces the the HTML class above.
In addition, if the user scrolls and stops before the bottom, then scrolls back up 30px toward the top, 'state-nav-is-visible' replaces the hidden tag.
The following below ONLY accomplishes 1. Any ideas? Thanks!
<script type="text/javascript">
$(function() {
//caches a jQuery object containing the header element
var header = $("html");
$(window).scroll(function(event){
var lastScrollTop = 120;
var st = $(this).scrollTop();
if (st > lastScrollTop){
header.removeClass("state-nav-is-visible").addClass('state-nav-is-hidden');
} else {
header.removeClass('state-nav-is-hidden').addClass("state-nav-is-visible");
}
});
});
</script>
st > lastScrollTop
is the right condition for 1.
st + $(window).height() === document.height
is the consition for 2.
I did not really get point 3, but you have to measure it. Open Chrome and a console as a separate window and type out the current status, like this:
$(window).scroll(function(event){
console.log("Top: " + $(this).scrollTop() + ", Bottom: " + ($(this).scrollTop() + $(window).height()));
});
and then watch the output as you scroll.
EDIT:
Taken into account the comments to the answer I have decided to take a closer look at the fiddle. I understand Mike States, as he wants to solve point 3, but unfortunately it is still unclear for me, but given the fact that he asks so nicely and so consistently for a solution to that problem, I have made a guess. Please, let me know if there is anything wrong with my guess. Everything was written based on your fiddle.
HTML:
<div class="wrapper">
<div class="inner"></div>
</div>
CSS:
div.wrapper {
height:2000px
}
.state-nav-is-visible{
background-color:red;
}
.state-nav-is-hidden{
background-color:green;
}
JS:
$(function() {
//caches a jQuery object containing the header element
var header = $("html");
var reachedBottom = false;
$(window).scroll(function(Event){
var lastScroll = 120;
var st = $(this).scrollTop();
//var bs = $(window).scrollTop() + window.innerHeight == $(document).height();
if (st < lastScroll){
header.removeClass('state-nav-is-hidden').addClass('state-nav-is-visible');
}
else if (st + $(window).height() === document.height) {
header.removeClass('state-nav-is-hidden');
reachedBottom = true;
} else if ((reachedBottom) && (st + $(window).height() <= document.height - 30)) {
reachedBottom = false;
console.log((st + $(window).height() - (document.height - 30)));
}
/*
else if (How do I get current position and if scrolled UP 30 PIXELS do something) {
alert('test');
}
*/
else {
header.addClass("state-nav-is-hidden");
}
});
});

Categories