onscroll top once - javascript

How can I edit this to run only once after user scroll up:
(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll < previousScroll){
alert('up');
}
previousScroll = currentScroll;
});
}()); //run this anonymous function immediately

if you want the user to be notified only once, then you could just use a boolean to keep track whether the notice is done.
(function () {
var previousScroll = 0;
var isAlerted = false;
$(window).scroll(function(){
if(isAlerted) return;
var currentScroll = $(this).scrollTop();
if (currentScroll < previousScroll){
console.log('up');
isAlerted = true;
}
previousScroll = currentScroll;
});
})();​
Also note the change in the last line. Use the self-executing anonymous function properly as
(function(){})();

Related

When the window is loading the event stops. After scrolling down the event starts

(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
event.preventDefault();
}
previousScroll = currentScroll;
});
}());
$(window).on('load', function () {
$(".timer").timerstart({
event.stopPropagation()l
});
});
is it possible?
when the page is begin event is stopping and scroll down event start.

JQuery noConflict issue for 2 different functions

Anyone could guide me to write Jquery noConflict for the below two different functions please? One function is for sticky header & another one is for search pop-up.
Header:-
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;
}
Search:-
function openSearch() {
$("#myOverlay").fadeIn(); // "500" is not required. "400" is the default value
}
function closeSearch() {
$("#myOverlay").fadeOut(); // "500" is not required. ""400 is the default value
}

Scroll Event Catch with jquery or vanilla Javascript

How can i catch scroll event? For example 1024px scroll down to top notify appears.
I'm stuck at this code;
(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
notify appears
} else {
notify appears
}
previousScroll = currentScroll;
});
}());
try this
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if ( scrollTop > 1024 ) {
//your code block
}
});
the scrollTop() method sets or returns the vertical scrollbar position for the selected elements.

jQuery TopDistance animation start?

I have a little problem with the script that I wrote.
Well, for some reason, it not refers to TopDistance which is declared to 850. Just one clicked on the down arrow and the animation starts.
Can you help with this early boot animation?
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
$('.projekt').each(function () {
var topDistance = $(this).offset().top;
if ((topDistance - 850) < scrollTop) {
$(this).addClass("animated fadeInRight");
}
});
});
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
$('.projekt').each(function () {
var topDistance = $(this).offset().top;
if ((topDistance - 850) < scrollTop) {
$(this).removeClass("projekt");
}
});
});
Take a look at this jsfiddle.
I've made one function instead of two and it works.
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
$('.projekt').each(function () {
var topDistance = $(this).offset().top;
if ((topDistance - 850) < scrollTop) {
$(this).addClass("animated fadeInRight").removeClass('projekt');
}
});
});

if statement run when condition fail bind with window scroll event

INFO
I am trying to build a one page website where, when user scroll a bit, it automatically snap to the next section, my logic here is to
get all scroll top of section,
find the nearest section,
depending on the direction of scroll
please see complete code here
http://jsfiddle.net/e3fed8sw/
I commented out the goTo() function b/c it break the site. please uncomment it before you try.
QUESTION:
why goTo() still run when it fail the direction test?
I think this might be where the problem is.
function checkScrollDirection(){
var lastScrollTop = 0, delta = 0;
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return false;
if (st > lastScrollTop){
// downscroll code
return "down";
} else {
// upscroll code
return "up";
}
lastScrollTop = st;
}
DOM READY
$(document).ready(
function() {
var onePageLoacations = [];
$('.onePage').each(
function(index, el) {
onePage($(el));
var onePageLoacation = getOnePageLocation($(el));
onePageLoacations.push(onePageLoacation);
}
);
$(window).on('scroll', function(event) {
var currentPos = $(window).scrollTop(),
direction = checkScrollDirection();
onePageCount = onePageLoacations.length,
topPosArray = [];
i = 0;
console.log('is traveling '+direction);
for(i; i<onePageCount; i++) {
topPosArray.push(onePageLoacations[i][0]);
}
var closestCord = closest(topPosArray,currentPos),
pageNumber = topPosArray.indexOf(closestCord), // 0 base
currentPage = $('.onePage').eq(pageNumber),
nextPage = currentPage.next('.onePage');
if(direction==="down") {
var currentThreshold = closestCord + 50;
if(currentPos > currentThreshold) {
goTo(currentPage, nextPage);
console.log('goto active');
} else {
console.log('condition not met');
}
} else {
}
});
}
);
There's two problems with your checkScrollDirection function:
It reinitialize your lastScrollTop everytime, so it doesn't remember the last value
You never assign the current st value to lastScrollTop because the assignement is done after the return statement.
To fix it:
Make your lastScrollTop variable global (declare it outside the function body)
Don't assign a new value to it every call of the function
Assign the current st value to it correctly
Code:
var lastScrollTop = 0;
function checkScrollDirection(){
var delta = 0;
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return false;
if (st > lastScrollTop){
lastScrollTop = st;
return "down";
} else {
lastScrollTop = st;
return "up";
}
}

Categories

Resources