So I have this jQuery function that adds / removes a CSS class to an element after 600px of the viewport height has been scrolled.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 600) {
$(".cta_box").addClass('fadeout');
} else {
$(".cta_box").removeClass('fadeout');
}
});
I'd like to tweak it so instead of working based off a pixel value, it works off of the view height css measurement "VH", but the equivalent results are what matter in this case.
It can be done by getting the window height using $(window).height().
For instance suppose you have to scroll half the screen more (height is 150vh) and you have to detect when 40% has been scrolled:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 0.4 * $(window).height()) {
$(".cta_box").addClass('fadeout');
} else {
$(".cta_box").removeClass('fadeout');
}
});
body{
margin: 0;
height: 150vh;
}
.cta_box {
height: 100%;
background: green;
}
.cta_box.fadeout {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta_box"></div>
Use a percentage of the window height to compare
$(window).scroll(function() {
var height = $(window).height(),
scroll = $(window).scrollTop()
limit = 0.6; //implies 60 vh or 60% of viewport height
if (scroll >= height*limit) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
and even better would be to update some variable only when the window is resized to avoid computations all the time
var limit = 0.6, //implies 60 vh or 60% of viewport height
scrollLimit = 0;
$(window).resize(function(){
scrollLimit = $(window).height() * limit;
}).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= scrollLimit ) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
}).trigger('resize').trigger('scroll'); // trigger both events on start to force initial setup
Try something like this
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
For retrieveing the viewport Height, you could use $(window).innerHeight():
$(window).scroll(function() {
var scroll = $(window).innerHeight();
if (scroll >= 600) {
$(".cta_box").addClass('fadeout');
} else {
$(".cta_box").removeClass('fadeout');
}
});
Hope this helps.
Leo.
Related
I am try to make a smooth scroll upward and downward but having issue with the follow up image. t
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 400) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 400 && scroll < 900) {
$('#two').css('position', 'absolute');
$('#three').css('position', 'fixed');
}
});
https://jsfiddle.net/KingJef/6q47vmhn/32/
I have found a question with a similar dynamics, following the proposal of the author of the question it is possible to do the same in your question:
$(document).ready(function() {
$(window).scrollTop(1);
var img1 = $('#one');
var posimg1 = img1.position().top;
var img2 = $('#two');
var posimg2 = img2.position().top;
var img3 = $('#three');
var posimg3 = img3.position().top;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll <= posimg1) {
img1.addClass('latched');
} else {
img1.removeClass('latched');
}
if (scroll <= posimg2) {
img2.addClass('latched');
} else {
img2.removeClass('latched');
}
if (scroll <= posimg3) {
img3.addClass('latched');
}
});
});
Demo: https://jsfiddle.net/pr0mming/ybar8onj/14/
Apparently the error is to preserve the absolute images with css, instead of this they are left in fixed and the property would be eliminated once the scroll is exceeded (visibility level) but otherwise the images should be kept in fixed.
But there is a shorter solution with the same algorithm, of course, it is simply to add this magic css and remove it as the case may be:
$(document).ready(function() {
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 500) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 500 && scroll < 1600) {
$('#two').removeAttr( 'style' );
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
else {
$('#two').css({ position: 'fixed', top: 0, width: 'auto' });
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
});
});
I am trying to get this code to only work if the device window is bigger than 960px, and it should only trigger when the window scrolls down 700px. The later part works however the first part does not.
The code works perfectly on where it fades in and then fades out, however I do not want it to do so on mobile devices, because the scroll point (700px) is too far down and is creating issues.
$(function () {
var header = $('.fadein');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (($(window).width() < 960) && (scroll >= 700)) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
});
});
I think your main issue is accidentally using < 960 instead of > 960, but you might also change to checking innerWidth rather than width if you really are interested in the window's width and not just the screen's width.
For this demo I reduced the target values to 500 and 200 to work better in a SO snippet. (Resize your browser window and run the snippet again to see it working above and below the 500px threshold.)
console.log("width: " + $(window).innerWidth() );
$(window).scroll(function () {
const
div = document.getElementById("div"),
scroll = $(window).scrollTop();
if ( ($(window).innerWidth() > 500) && (scroll >= 200) ) {
div.style.backgroundColor = "yellow";
}
else {
div.style.backgroundColor = "white";
}
});
#div{ height: 300vh; border: 1px solid grey; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
Did you try to split that if statement ?
For example (second if will fire only if width is at least 960px)
if($(window).width() >= 960) {
if (scroll >= 700) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
}
I am trying to animate an opacity value from 0 to 1, based on the scroll position within the viewport height. The code below sets variables for windowHeight and scrollTop, which can be combined to calculate percentageScrolled (0–100) of the viewport height. Based on this I am able to switch CSS values at set points, but instead I want to gradually change the opacity from 0–100 of percentageScrolled.
How can I adjust the code below to transition/animate the opacity?
Thanks.
$(window).on('scroll', function(){
// Vars
var windowHeight = $(window).height();
var scrollTop = $(this).scrollTop();
var percentageScrolled = (scrollTop*100)/windowHeight;
if( percentageScrolled < 100 ) {
$('.colour-overlay').css('opacity', '1');
} else {
$('.colour-overlay').css('opacity', '0');
}
});
You can remove the if and set the opacity to the percentage divided by 100
$(window).on('scroll', function() {
// Vars
var windowHeight = $(window).height();
var scrollTop = $(this).scrollTop();
$('.colour-overlay').css('opacity', scrollTop / windowHeight);
});
.colour-overlay {
display: block;
width: 20px;
height: 1200px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="colour-overlay"></div>
$(‘.colour-overlay’).css(opacity, percentageScrolled / 100);
Instead of if else statement.
Also as a general advice try to avoid using var, use const or let instead and if your project doesnt depend on jquery try to avoid it too.
const overlays = document.querySelectorAll(‘.colour-overlay’);
window.addEventListener('scroll', () => {
const windowHeight = window.offsetHeight;
const scrollTop = window.scrollTop;
const percentageScrolled = (scrollTop * 100) / windowHeight;
for (const overlay of overlays) {
overlay.style.opacity = percentageScrolled / 100;
}
});
This would be the pure js solution.
Dont know if i understood you right, but a wrote an example have a look.
$(document).on('scroll', function(){
// Vars
// use body instead of window, body will return the right height where window will return the view size
var windowHeight = $("body").height();
var scrollTop = $(this).scrollTop();
var percentageScrolled = Math.abs((((scrollTop / windowHeight) * 100) / 100 ));
$('.colour-overlay').css('opacity', percentageScrolled);
});
.colour-overlay{
background:red;
height:1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="colour-overlay"></div>
jQuery:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
}
}
});
So, basically my class that I'm adding on scroll. .bgposi is moving the background image position when I scroll past 50px on the page using (window).scroll(function(). Which works fine, so my first if statement alone.. However, I'm trying to reverse it with another if statement, when the user scrolls back up - this is where I'm failing.. any pointers?
Correct the following in your second if statement:
Do not nest it.
Change the comparison operator >= to <=.
Use removeClass.
Change:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
}
}
});
To:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
} else if (scroll <= 50) {
$(".class").removeClass("bgposi");
// $(".top").removeClass("fixd");
// $(".logo").removeClass("maxwidth");
}
});
You could cache some reused selectors (doing the lookup once), like so:
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var $class = $(".class"),
$top = $(".top"),
$logo = $(".logo");
if (scroll >= 50) {
$class.addClass("bgposi");
$top.addClass("fixd");
$logo.addClass("maxwidth");
} else if (scroll <= 50) {
$class.removeClass("bgposi");
$top.removeClass("fixd");
$logo.removeClass("maxwidth");
}
});
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var $class = $(".class");
if (scroll >= 50) {
$class.addClass("bgposi");
} else if (scroll <= 50) {
$class.removeClass("bgposi");
}
});
body {
height: 200vh;
background-color: peachpuff;
}
.class {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20%;
background-color: dodgerblue;
}
.class.bgposi {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class"></div>
So, I'm trying to reproduce the main scrolling effect on this beautiful portfolio: http://melaniedaveid.com/
I've followed this tutorial on Codyhouse: http://codyhouse.co/gem/fixed-background-effect/
And came up with the following Javascript function.
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
contentright1 = document.getElementById('contentright1');
function checkScroll(id) {
var offset = scrollTop - $(id).offset().top;
if (offset >= 0 && offset < windowHeight) {
$(id).addClass('fixed_content');
if ((scrollTop/2) <= windowHeight) {
$(id).removeClass('fixed_content');
}
}
else {
$(id).removeClass('fixed_content');
}
};
checkScroll(contentright1);
The fidex_content class apply the following CSS:
.fixed_content {
position: fixed;
top:0; }
As you can see, my main problem is that I can't manage to remove this class when I go back to the position of the element in the first place.