I'm trying to add and remove some classes depending on the scroll position. The problem in my code is that it's not doing my else if conditions.
Also, can I use any other measurements? Such as document.body.scrollTop < 25%
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop < 800 || document.documentElement.scrollTop < 800) {
document.querySelector(".navbar").classList.add('nav-dark');
} else if(document.body.scrollTop === 0 || document.documentElement.scrollTop === 0){
document.querySelector(".navbar").classList.add('nav-transparent');
document.querySelector(".navbar").classList.remove('nav-dark');
}
}
</script>
0 will always be less than 800; as such, you need to change the order of your statements.
if(document.body.scrollTop === 0 || document.documentElement.scrollTop === 0){
document.querySelector(".navbar").classList.add('nav-dark');
} else if (document.body.scrollTop < 800 || document.documentElement.scrollTop < 800) {
document.querySelector(".navbar").classList.add('nav-transparent');
document.querySelector(".navbar").classList.remove('nav-dark');
}
Your code can be simplified by using window.pageYOffset instead to get the vertical amount scrolled. See my answer here if you want a robust cross browser solution.
if(window.pageYOffset === 0){
document.querySelector(".navbar").classList.add('nav-dark');
} else if (window.pageYOffset < 800) {
document.querySelector(".navbar").classList.add('nav-transparent');
document.querySelector(".navbar").classList.remove('nav-dark');
}
Reverse the condition i..e move condition with 0 first and then < 800. Since 0 is also less than 800 that's why it is not going into else if block.
Related
What happens is the rocketship turns round and the background does some stuff when the user scrolls down 50px. How can I make it so that the rocket does something else when the user scrolls down 100px?
here is my code
<script>
window.onscroll = function() {
var scrollamount = document.body.scrollTop;
var otherscrollamount = document.documentElement.scrollTop;
var rocket = document.getElementById("rocketship");
var backgroundone = document.getElementById("one");
var backgroundtwo = document.getElementById("two");
if (scrollamount > 50 || otherscrollamount > 50) {
rocket.setAttribute("style", "transform: rotate(90deg); animation: turn1 1s;");
backgroundone.setAttribute("style", "opacity: 0; animation: fade2 1s;");
}
else if (scrollamount < 50 || otherscrollamount < 50) {
rocket.setAttribute("style", "transform: rotate(0deg); animation: turn2 1s;");
backgroundone.setAttribute("style", "opacity: 1; animation: fade1 1s;");
}
else if (scrollamount < 100 || otherscrollamount < 100) {
// other stuff
}
else if (scrollamount > 100 || otherscrollamount > 100) {
//other stuff
}
}
</script>
You just need to test your conditions to see that their order is wrong:
if (scrollamount > 50 || otherscrollamount > 50) {
// This wil execute even if scroll value is greater than 100
// Last condition will never be evaluated
}
else if (scrollamount < 50 || otherscrollamount < 50) {
// This will execute only if the first condition returned false and scroll value != 50
}
else if (scrollamount < 100 || otherscrollamount < 100) {
// This will execute only if scroll value == 50
}
else if (scrollamount > 100 || otherscrollamount > 100) {
// This won't execute, because previous conditions covered all possible values
}
Rearrange your conditions like this:
// If you need greater scroll, add condition above this one
// Evaluate first greater than
if (scrollamount > 100 || otherscrollamount > 100) {
}
else if (scrollamount > 50 || otherscrollamount > 50) {
// Below condition not needed, scroll value is between 51 and 100
// if (scrollamount < 100 || otherscrollamount < 100)
}
else {
// Below condition not needed, unless you want to omit action if scroll == 50
// if (scrollamount < 50 || otherscrollamount < 50)
}
It's not very clear which exact conditions you want to check for but I think you want to do it like this:
if (scrollamount > 100 || otherscrollamount > 100) {
// Scrolled > 100
} else if (scrollamount > 50 || otherscrollamount > 50) {
// Scrolled 51-100
} else {
// Scrolled 1-50
}
You can set ranges of values by saying scrollAmount >= 50 && scrollAmount < 100 to maximize the control over when what should happen. This way you can create a start and a stop value of when do something.
The document.body element doesn't always change. Instead check for either the document.scrollingElement.scrollTop value or, as you already do, the document.documentElement.scrollTop as fallback.
Place your element selectors outside of the onscroll function, as these elements only have to be selected once. This will same some performance.
Change the className property values on the elements to set a class instead of setting inline styles. Though setting inline styles is not wrong, it can certainly help to keep your CSS and JavaScript separated if you'll need to edit the styles or scripts.
var rocket = document.getElementById("rocketship");
var backgroundone = document.getElementById("one");
var backgroundtwo = document.getElementById("two");
window.onscroll = function() {
var scrollamount = document.scrollingElement.scrollTop || document.documentElement.scrollTop;
if (scrollAmount < 50) {
rocket.className = 'rocket-stage-1';
backgroundone.className = 'background-stage-1';
} else if (scrollamount >= 50 && scrollamount < 100) {
rocket.className = 'rocket-stage-2';
backgroundone.className = 'background-stage-2';
} else if (scrollamount >= 100 && scrollamount < 150) {
// other stuff
}
}
.rocket-stage-1 {
transform: rotate(0deg);
animation: turn2 1s;
}
.background-stage-1 {
opacity: 1;
animation: fade1 1s;
}
.rocket-stage-2 {
transform: rotate(90deg);
animation: animation: turn1 1s;
}
.background-stage-2 {
opacity: 0;
animation: fade2 1s;
}
I am trying to show 3 divs (sequentially and when scrolling), and only between two pixel values for each div, but there is something about my script that I don't understand:
What I want to show is:
div-1 only visible between 200 and 500 px
div-2 only visible between 900 and 1200 px
div-3 only visible between 1600 and 1900 px
What am I doing wrong here?
DEMO (JSFiddle)
And on the other hand, is there any simpler and more elegant way to do this?
Thanks in advance!
SCRIP:
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
//if (document.body.scrollTop > 200 || document.documentElement.scrollTop < 500) {
$('#div-1').fadeIn();
}
else {
$('#div-1').fadeOut();
};
if ($(this).scrollTop() > 900) {
//if (document.body.scrollTop > 900 || document.documentElement.scrollTop < 1200) {
$('#div-2').fadeIn();
}
else {
$('#div-2').fadeOut();
};
if ($(this).scrollTop() > 1600) {
//if (document.body.scrollTop > 1600 || document.documentElement.scrollTop < 1900) {
$('#div-3').fadeIn();
}
else {
$('#div-3').fadeOut();
};
});
HTML:
<div id="div-1">Radio</div>
<div id="div-2">Blog</div>
<div id="div-3">Store</div>
<div id="content"></div>
CSS:
#div-1,#div-2,#div-3 {
display:none;
position:fixed;
width:200px;
height:60px;
margin:0 auto;
text-align:center;
font-size:20px;
line-height:60px
}
#div-1{background:#ff0;color:#000}
#div-2{background:#000;color:#fff}
#div-3{background:green;color:#fff}
#content{text-align:center;height:2500px}
You were just missing &&.
if ($(this).scrollTop() > 200 && $(this).scrollTop() < 500) {
// ...
}
if ($(this).scrollTop() > 900 && $(this).scrollTop() < 1200) {
// ...
}
if ($(this).scrollTop() > 1600 && $(this).scrollTop() < 1900) {
// ...
}
"If scrolling is greater than 200 AND at the same time the scrolling is less than 500, then show div-1"...
Here is a working example: JSFiddle
You are missing a couple things:
All of your logic should use && instead of ||
You should check the visibility of items before showing or hiding them.
You should always store references to commonly accessed DOM elements, especially if you are accessing them inside a scroll event handler (which fires A BUNCH).
OK, that last point is just a performance thing... but you should know it!. Here is an updated fiddle:
http://jsfiddle.net/xebgpduv/
Here's what a block of logic looks like:
if (scrollTop > 200 && scrollTop < 500) {
if(!$div1.is(':visible')) {
$div1.fadeIn();
}
} else if($div1.is(':visible')) {
$div1.fadeOut();
};
I need to convert the fallowing working script as so it works on scroll regardless of how the site is being scrolled.
// // HEADER
$(window).bind('mousewheel', function(event) {
if ($(document).scrollTop() <= 20 || event.originalEvent.wheelDelta > 0 && $(document).scrollTop() <= 105) {
//console.log('large');
headerLarge();
}
else if (event.originalEvent.wheelDelta > 0 && $(document).scrollTop() <= 120) {
//console.log('medium');
headerMed();
}
else if (event.originalEvent.wheelDelta < 0 && $(document).scrollTop() >= 100) {
//console.log('small');
headerSm();
}
});
I tried using the following without success:
$(document).on('scroll', function(event) { ...
This should work
$(window).scroll(function(){
});
You can do it using $(window).scroll() like this:
$(window).scroll(function() {
alert("scrolling!");
});
Taken From Infinite Scroll Paging
I have this script to make the page scroll several lines at a time, to allow javascript to be executed whilst scrolling in iOS. However i would like it to stop when it reaches a certain point in the page. I cant figure out why this is'nt working...
window.onload=function(){
document.getElementById( 'pause').addEventListener( "click" , function(){
if( window.scrollTimerId ){
window.clearInterval(window.scrollTimerId );
window.scrollTimerId = null
}
else{
doScroll();
window.scrollTimerId= window.setInterval( doScroll , 5);
}
});
var pauseTop = $pause.offset().top;
function doScroll(){
if (pauseTop >= 300 && pauseTop < 3004 || pauseTop >= 4000 && pauseTop < 4004 || pauseTop >= 7500 && pauseTop < 7504) {
}else{
window.scrollBy(0,15);
}
}
}//]]>
As you can see this should only scroll if the view port is between 3000 & 3004, 400 & 4004 ect...
any ideas?
The variable pauseTop doesn't get recalculated. Include the calculation in doScroll.
Ok, so how about this:
JQuery
$('#pause').click(function () {
var y = $(window).scrollTop();
if (y < 300) {
scrollify(300);
}
else if (y < 3004) {
scrollify(3004);
}
// etc...
});
function scrollify(y) {
$('body, html').animate({scrollTop: y});
}
DEMO: http://jsfiddle.net/3btFN/1/
This will scroll the window to a specified point, based on matching criteria.
$(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)