Develop Reference

Why is jQuery removeClass reappearing on scroll?

I have a div with a 2 logos in it and on scroll the first logo hides and the second appears using classes. On reverse scroll the second logo should hide and the first reappear. The first is reappearing but the second is hiding then reappearing when I reach the top of the page.
I've been going around in circles and I can't understand why on reverse scroll the 'show-logo' class is reappearing. Can anyone explain why?
JS:
if ($(window).width() > 640){
var scrollTop = $(window).scrollTop();
var header = $(".site-header");
if (scrollTop > 50) {
header.addClass("scrolling");
setTimeout(function() {
header.addClass("show-logo");
}, 500);
}
else {
header.removeClass("show-logo scrolling");
};
} else {
header.removeClass("show-logo scrolling");
}
Thanks in advance.

The setTimeout has no clue that it should not run so it runs. So if you do not want it to execute it, you need to cancel it. Two different ways depending on what you want to happen.
var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
if (myTimer) {
window.clearTimeout(myTimer)
}
if ($(win.width() > 640) {
var scrollTop = win.scrollTop();
if (scrollTop > 50) {
header.addClass("scrolling");
myTimer = setTimeout(function() {
header.addClass("show-logo");
}, 500);
} else {
header.removeClass("show-logo scrolling");
}
} else {
header.removeClass("show-logo scrolling");
}
});
or
var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
if ($(win.width() > 640) {
var scrollTop = win.scrollTop();
if (scrollTop > 50) {
header.addClass("scrolling");
if (!myTimer) {
myTimer = setTimeout(function() {
header.addClass("show-logo");
}, 500);
}
} else {
header.removeClass("show-logo scrolling");
if (myTimer) {
window.clearTimeout(myTimer)
myTimer = null
}
}
} else {
header.removeClass("show-logo scrolling");
}
});

How to hide logo at different scroll point depending on screen width

Trying to hide the logo on a sticky nav when it scrolls to 72 pixels, but on smaller screens it needs to hide when it gets to 150 pixels.
I tried to just hide it at 72 pixels but on the smaller screens it starts flashing because the element being hidden causes the scroll point to change and so it shows again, going into a loop.
jQuery(document).ready(function() {
if ($(window).width() <= 992){
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 150) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
} else {
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 72) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
});
});

You're not closing the jquery scrolling function. Its missing });
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 150) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
});
Can't really tell why it wouldn't work otherwise.
Anyways, try this. It worked for me and it's cleaner :
var windowsWidth = $(window).width();
if (windowsWidth <= 992){
fadeOutLogo(72);
} else {
fadeOutLogo(150);
}
function fadeOutLogo(offset){
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
});
}

Scroll to bottom of page using Javascript or jquery with these conditions

I am trying to stimulate a web chat room for which the page needs to be:
Scrolled to bottom of the page after some interval if the user hasn't scrolled.
Stop scrolling if the user has scrolled.
Starts scrolling to bottom of page if user reaches a div #end
<script>
var scroll = 1;
function autoScrolling(scroll) {
if(scroll==1){
window.scrollTo(0,document.body.scrollHeight);
}
}
window.onscroll = function() {
setInterval(autoScrolling(0), 1000);
}
window.addEventListener("scroll", function() {
var elementTarget = document.getElementById("end");
if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
scroll=1;
setInterval(autoScrolling(0), 1000);
}
});
</script>
I am applying this logic but it isn't working.

Try this,
var scrolled = false;
$(document).ready(function(){
//First requirement
window.setInterval(function(){
checkScroll();
}, 5000);
//Second requirement
window.onscroll = function() { setScroll()};
//Third requirement
$('#end').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
autoScroll();
}
})
})
function autoScroll(){
window.scrollTo(0,document.body.scrollHeight);
}
function setScroll(){
if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
scroll=true;
}
}
}
function checkScroll(){
if(!scrolled)
autoScroll();
scrolled = false;
}

Sticky/snap scroll doesn't scroll back up

I've got a script that will allow for snap scrolling when you move down but I can't get it to allow the user to scroll back upwards.
var items = $(".item");
var animating = false;
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
if ($(value).offset().top > $(window).scrollTop()) {
animating = true;
$('body').animate( { scrollTop: $(value).offset().top + 'px' }, 1000);
setTimeout(function() { animating = false; }, 500);
return false;
}
});
}, 50));
}
});
http://jsfiddle.net/kZY9R/77/

You have to do
var body = $("html, body");
and
$(body).stop().animate( { scrollTop: $(value).offset().top)}, 1000,'swing');
Chrome reading body and srolling, Firefox need html to do it
Check Working Fiddle

How reverse animations made with scrollTop();

function firstAnimation() {
$('.etc(1)').fadeIn();
}
function secondAnimation() {
$('.etc(1)').fadeOut();
$('.etc(2)').fadeIn();
}
function thirdAnimation() {
$('.etc(2)').fadeOut();
$('.etc(3)').fadeIn();
}
function fourthAnimation() {
$('.etc(3)').fadeOut();
$('.etc(4)').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
firstAnimation();
}
if ($(this).scrollTop() > 300) {
secondAnimation();
}
if ($(this).scrollTop() > 450) {
thirdAnimation();
}
if ($(this).scrollTop() > 600) {
fourthAnimation();
}
});
Guys, i'm using scrollTop() to animate a piece of my site, and i was wondering if i can reverse the animation if o scroll to the bottom, and not to the top.
I was searching but there isn't a scrollBottom in jquery.

First, set an additional requirement for each if statement to condition each event to a scroll range to prevent multiple events from being triggered. Second, add a .fadeOut() function to the next elements so that the effect is reversed when the user scrolls the opposite direction.
The code should look like:
function firstAnimation() {
$('.etc1').fadeIn();
$('.etc2').fadeOut();
}
function secondAnimation() {
$('.etc1').fadeOut();
$('.etc2').fadeIn();
$('.etc3').fadeOut();
}
function thirdAnimation() {
$('.etc2').fadeOut();
$('.etc3').fadeIn();
$('.etc4').fadeOut();
}
function fourthAnimation() {
$('.etc3').fadeOut();
$('.etc4').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
firstAnimation();
}
if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
secondAnimation();
}
if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
thirdAnimation();
}
if ($(this).scrollTop() > 6000) {
fourthAnimation();
}
});
Demo on JSFiddle

To scroll to the bottom of the document, try:
$(window).scrollTop($(body).height());

$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() });
});