jQuery scroll function does not work - javascript

I have this function:
$(document).ready(function() {
if ($(".splash").is(":visible")) {
$(".site").css({"opacity":"0"});
}
});
$(window).scroll(function(){
$(window).off("scroll");
$(".splash").slideUp("800", function() {
$("html, body").animate({"scrollTop":"0px"},100);
$(".site").delay(100).animate({"opacity":"1.0"},800);
});
})
I use this to pass from splash page to home in animation way. But when I'm in home page the scroll is still off and I need it to make a change in hte header. I use this code:
$(document).ready(function( $ ) {
$(window).scroll(function() {
var sT = $(this).scrollTop();
if (sT >= 200) {
$('header').addClass('scroll-header')
} else {
$('header').removeClass('scroll-header')
}
});
});
This two parts fight together!! How can I put on scroll after splash page to go out? Thanks!

In the end i have try to not use scroll off, and change with a simple
.show_splash{position: fixed;}
In this way finely work!!!

Related

Add class to my <nav> when scroll using jQuery

I am trying to do a simple task but I just can't see what I am doing wrong.
My goal is to add a class on my <nav> when the user scroll to the bottom of the page, and remove it when the he scrolls back to top.
Here's the code. PS: There's no error message on my console, and I tested if the jQuery is correctly implemented (and it is). I'm using a recent version
<script type="text/javascript">
$(window).on('scroll', function() {
if($(window).scrollTop()){
$('nav').addClass('when-scroll');
}else {
$('nav').removeClass('when-scroll');
}
})
</script>
you can try this;
var scrollTop = $(window).scrollTop()
$(window).on('scroll', function() {
if($(window).scrollTop() < scrollTop){
$('nav').addClass('when-scroll');
}else {
$('nav').removeClass('when-scroll');
}
scrollTop = $(window).scrollTop()
})

jQuery scroll function only works once

I am trying to add a class to the header if the user scrolls past the div #home - and remove the class when you scroll back to the top.
The issue is, when you scroll past the div it adds the class but when you keep scrolling and then scroll back up, the class does not get removed. The event is only firing once...
I created this jsFiddle here - https://jsfiddle.net/breezy/9evksr7y/
It works in my jsFiddle file but not on my actual web page, I've also tried this...
$(window).on( 'scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() > 400) {
// alert("made it!");
header.addClass('fixed');
clearInterval(interval);
} else {
header.removeClass('fixed');
}
}, 250);
});
But it still does not work. Any idea what I am doing wrong?
Thanks
Edit: The issue was that one of my other functions in the same document was conflicting w/ this scroll function.
So I made some minor tweaks to the code. Not sure what the issue was but this seemed to work for me on my webpage.
$(window).on('scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
if ($(window).scrollTop() > target) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});

Fade in/out div scrollTop

I have a floating menu that i want to fade in when you start to scroll down the page, then fade out when you are back at the top of the page. I have got it working without the fade, but im not sure how to add the fades. Any help appreciated. Thanks.
$(document).scroll(function() {
$('#floatingnav').toggle($(this).scrollTop()>250)
});
css
#floatingnav {
position:fixed;
display:none;
}
You can use fadeToggle with some duration as an argument(just incase you want) instead of plane toggle.That will do your job.
$(document).scroll(function() {
$('#floatingnav').fadeToggle($(this).scrollTop()>250)
});
You can try this to test if div has reached top
$(window).scroll(function () {
var d = $('div'); // this is your fixed div
if (d.offset().top > 250) {
d.fadeIn();
} else {
d.stop().fadeOut();
}
});
TEST FIDDLE
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 250) {
$("#floatingnav").fadeIn();
} else {
$("#floatingnav").stop().fadeOut();
}
});

How do I make a "sticky menu" go back to it original class as I scroll back up?

I am fairly new to javascript and I am trying to make a second sticky menu on my site. I have the second nav change its class as you scroll down which seems to work fine. However, I want it to go back to its original class once you scroll back up. Any help? The code is below.
<script type="text/javascript">
$(window).scroll(function () {
if (window.scrollY > 200)
{
$("#top-bar").removeClass("nav-main").addClass("navbar-inner").addClass("navbar-fixed-top");
}
});
</script>
Thanks.
maybe something along the lines of an else to restore the original classes.
<script type="text/javascript">
$(window).scroll(function () {
if (window.scrollY > 200) {
$("#top-bar").removeClass("nav-main").addClass("navbar-inner").addClass("navbar-fixed-top");
} else {
$("#top-bar").addClass("nav-main").removeClass("navbar-inner").removeClass("navbar-fixed-top");
}
});
</script>

Make scrollTop to always check

I'm doing a scrollTop jQuery function, and it is working very nice, see it below:
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
});
});
However, if the user have his scrollTop, in that case, higher than 1225, and the script isn't fully loaded, the function will not happen, just if he scroll the page again. Isn't there a way to make the scrollTop to always check, not just if the user Scrolls the page?
Thanks a lot in Advance.
Yes, trigger the event yourself.
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
}).triggerHandler("scroll");
});

Categories

Resources