jQuery won't remove the class after scrolling
This is my script:
$(window).scroll(function(){
if($(window).scrollTop() >= $("#white").offset().top -70) {
$('.burger-menu').addClass('white');
} else {
$('.burger-menu').removeClass('white');
}
});
$(window).scroll(function(){
if($(window).scrollTop() >= $("#color-main").offset().top -70) {
$('.burger-menu').addClass('color-main');
} else {
$('.burger-menu').removeClass('color-main');
}
});
$(window).scroll(function(){
if($(window).scrollTop() >= $("#yellow").offset().top -70) {
$('.burger-menu').addClass('yellow');
} else {
$('.burger-menu').removeClass('yellow');
}
});
This is my HTML:
<section class="home-page" id="white">Blablabla</section>
<section class="wrap" id="color-main">Blablabla</section>
<section class="wrap" id="yellow">Blablabla</section>
but my <div>
<div class="burger-menu white color-main yellow">
still has the classes "white" and "color-main", which should be removed. :(
I made a codepen for you to see it.
There are 2 fixes I would recommed you try:
Don't do multiple .scroll(function(){...}) calls, they overwrite each other.
Use $("body").scroll(function(){...}), because that's the element you (usally) scroll in
The below example uses only the IF statement and deletes the other classes. Try this and see if you get the result you desire. Instead of relying on an ELSE that could be broken by another scroll function else statement we simply remove all classes and only add the class you want.
Example:
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#white").offset().top - 70) {
$('.burger-menu').removeClass("color-main").removeClass("yellow").addClass('white');
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
$('.burger-menu').removeClass("white").removeClass("yellow").addClass('color-main');
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
$('.burger-menu').removeClass("color-main").removeClass("white").addClass('yellow');
}
});
I agree with those who suggest putting them all in a single .scroll() function. This worked for me:
(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() >= $("#white").offset().top - 70) {
$('.burger-menu').addClass('white');
} else {
$('.burger-menu').removeClass('white');
}
if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
$('.burger-menu').addClass('color-main');
} else {
$('.burger-menu').removeClass('color-main');
}
if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
$('.burger-menu').addClass('yellow');
} else {
$('.burger-menu').removeClass('yellow');
}
});
})(jQuery);
To have only one class active at a time, use removeClass to remove the others. You can use a single scroll event handler, and rearrange the code to look for the last section first, that makes the code simpler:
$(window).scroll(function(){
var top = $(window).scrollTop() + 70;
if (top >= $("#yellow").offset().top) {
$('.burger-menu').removeClass('white color-main').addClass('yellow');
} else if(top >= $("#color-main").offset().top) {
$('.burger-menu').removeClass('white yellow').addClass('color-main');
} else if (top >= $("#white").offset().top) {
$('.burger-menu').removeClass('color-main yellow').addClass('white');
} else {
$('.burger-menu').removeClass('white color-main yellow');
}
});
Demo: https://jsfiddle.net/Guffa/yka8nzt4/1/
Another way would be to determine the status for each class:
$(window).scroll(function(){
var top = $(window).scrollTop() + 70;
var white = top >= $("#white").offset().top;
var main = top >= $("#color-main").offset().top;
var yellow = top >= $("#yellow").offset().top;
$('.burger-menu')
.toggleClass('white', white && !main)
.toggleClass('color-main', main && !yellow)
.toggleClass('yellow', yellow);
});
Related
I want to add a class to $ ('# header') when my web page scrolls down by 100px
this is the code :
$(window).scroll(function(){
var offset = $(window).offset();
if (offset.top > 100) {
$('#header').addClass('header2')
}
else {
$('#header').removeClass('header2')
};
});
#JQueryCode
Please use below mention code
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
if (scroll >= 50) {
//console.log('a');
$("#header").addClass("header2");
} else {
//console.log('a');
$("#header").removeClass("header2");
}
});
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() });
});
I am trying to create a active state of the page navigation depending on where you are down the page.
this is what I have so far....
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 0) {
$(".nav1").addClass("active");
} else if (scroll >= 500) {
$(".nav1").removeClass("active");
$(".nav2").addClass("active");
} else {
$(".active").removeClass("active");
}});
but not working as expected
$(window).scrollTop(); cannot be negative. So your code will always execute the first if statement. This one
if scroll >= 0) {
$(".nav1").addClass("active");
}
The rest of your code will never be executed.
Try seperate your if statements.
if (scroll >= 0) {
$(".nav1").addClass("active");
}
if (scroll >= 500) {
$(".nav1").removeClass("active");
$(".nav2").addClass("active");
} else {
$(".active").removeClass("active");
}});
$(function() {
$(document).scroll(function() {
var windowscroll = $(this).scrollTop();
if($(window).scrollTop() >= 900)
{
$("#scrollhome").css("opacity",(1-($(window).scrollTop()-900)/75))
}
else
$("#scrollhome").css("opacity",1)
if(windowscroll > 900 && windowscroll < 1300)
{
$("#scrollabout").css("opacity",($(window).scrollTop()-900)/75)
}
else
$("#scrollabout").css("opacity",0)
if(windowscroll > 1200 && windowscroll < 1500)
{
$("#scrollabout").css("opacity", (-1($(window).scrollTop()-1200)/75))
$("#scrolldesign").css("opacity",($(window).scrollTop()-1200)/75)
}
else
$("#scrolldesign").css("opacity",0)
});
});
the first overlap between scrollhome and scrollabout works nice but when it comes to the second overlap between scrollabout and scroll design i don't know how to hide the scrollabout funktion in a smooth way again, i need help! how can i make the scrollabout hidden again using scrolltop?
you misstyped it as -1($(window)...... it should also be 1-($(window)
I'd like to add a class to an element when a user first scrolls away from the top of the page. If the user then scrolls back up and hits the top of the page I'd like that class removed.
Use of jQuery in the solution is fine.
try
$(window).scroll(function() {
$("id or class").removeClass("active");
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$("#one").addClass("active");
}
else if (scroll <= 1000) {
$("#tow").addClass("active");
}
else {
$("#three").addClass("active");
}
}
So here is the solution you're looking for. Just customize it with your div tags.
$(document).ready(function () {
$(window).scroll(function(){
// get the height of #wrap
var h = $('#top').height();
var y = $(window).scrollTop();
if( y > (h*.25) ){
$("#sidef").fadeIn(1100);
} else {
$('#sidef').fadeOut(75);
}
});
});
var notAdded = true;
$(window).scroll(function(){
if( $(this).scrollTop() == 0){
$(elem).removeClass('classname');
notAdded = true;
}
else if(notAdded){
$(elem).addClass('classname');
notAdded = false;
}
});