I would like to fadeIn() different elements as soon as they come into viewport view, when scrolling down a page.
My code however fades in all DIVs (that have the ".fadethis" class) at once, instead of only when that specific element comes into view:
$(window).scroll(function() {
$(".fadethis").each(function() {
var top_of_element = $(this).offset().top;
var bottom_of_element = $(this).offset().top + $(this).outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$(this).fadeIn(10000);
}
});
});
CSS
.fadethis{
display:none;
}
Import jQuery, animate.less and waypoint
Javascript:
$(document).ready(function(){
$('.fromLeft').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("bounceInLeft");
},
{offset:'100%'});
$('.fromRight').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("bounceInRight");
},{offset:'100%'});
$('.appear').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("fadeIn");
},{offset:'100%'});
});
And HTML
<div class="animated onView fromLeft">
appears from left
</div>
Here you can see an example I made
Related
I have an animation on some text at the top of the screen and part way down. To run the animation I have it add a class.
If I have it add the class when the document is ready, then the animation at the top of the page runs right away but so does the animation partway down the page (so we don't see if happen).
If I have it add the class on scroll, then you need to scroll slightly for the animation at the top of the page to run.
So, I have the following code which works how I would like. My question is, is there a way to combine this? It seems very repetitive.
$(document).ready(function() {
$('.animateText').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slide-text");
}
});
});
$(window).scroll(function() {
$('.animateText').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slide-text");
}
});
});
I have tried using this but it is the same as if I just used window scroll.
$(document).ready(function() {
$(window).scroll(function() {
$('.animateText').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slide-text");
}
});
});
});
I need to add class via javascript on scroll. My issue is I need to add and remove class on reaching a particular section id
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader1").removeClass("video-background");
$(".clearHeader11").addclass("video-foreground");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="id1" class="clearHeader1 video-background"></section>
<section id="id2" class="clearHeader1"></section>
Try this one
if($(window).scrollTop() >= $('#id1').offset().top + $('#id1').outerHeight() - window.innerHeight) {
$("#id1").removeClass("active");
console.log("removeClass");
}else{
console.log("addClass");
$("#id1").addClass("active");
}
Try this
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var section1Height = $('#id1').offset().top + $('#id1').outerHeight() - window.innerHeight;
if (scroll >= section1Height ) {
$(".clearHeader1").removeClass("video-background");
$(".clearHeader11").addclass("video-foreground");
}
}
I'm trying to create sticky headers that when you scroll to a div the head state becomes fixed and stays in view, when the div has come to an end and scrolls out of view I want the title to then become absolute and stay at the bottom of its parent.
I've got the initial part working only I'm struggling on adding the 'absolute' class...
https://jsfiddle.net/yw313vf2/1/
function fixTitle() {
$('.service-pane').each(function() {
var $this = $(this);
var offset = $this.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > offset) {
$this.addClass('fixed');
} else {
$this.removeClass('fixed');
}
});
}
$(window).scroll(fixTitle);
So I had to run another check within the function to see if when scrolled the end of my div had reached the top of the window and if so add an additional class...
function fixTitle() {
$('.service-pane').each(function() {
var $this = $(this);
var offset = $this.offset().top - 50;
var scrollTop = $(window).scrollTop();
if (scrollTop > offset) {
$this.addClass('fixed');
if ($this[0].getBoundingClientRect().bottom < $('.manifesto').height() + 50) {
$this.addClass('absolute');
} else {
$this.removeClass('absolute');
}
} else {
$this.removeClass('fixed');
}
});
}
Hey I have a div with "#header1" which I would like to keep at the top of the page as a user scrolls down. Now, I managed to get the div stick to the top upon scroll using "position:fixed" on "#header1" and what I would like to do now is change the opacity of the "#header1" once I scroll down and back to it's opaque state if i'm scrolled back up. I previously had posted my code but then learned we can use only YUI. Any advice would help. I am a total novice when it comes to YUI.
HTML:
<div id="header1">Hello</div>
CSS:
#header1 {
position: fixed;
top:0px;
z-index:1000;
margin:0;
padding:10px;
}
JS:
var target = $('div#header1');
var targetHeight = target.height();
var scrollRange = maxScroll/(target.length-1);
$(document).scroll(function(e){
var scrollY = $(window).scrollTop();
var scrollPercent = (scrollRange - scrollY%scrollRange)/scrollRange;
var divIndex = Math.floor(scrollY/scrollRange);
target.has(':lt(' + divIndex + ')').css('opacity', 0);
target.eq(divIndex).css('opacity', scrollPercent);
target.has(':gt(' + divIndex + ')').css('opacity', 1);
});
You can try something like the following:
var notScrolled = true;
var headerTop = $('header').height(); // header size
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > headerTop && notScrolled) {
$('header').css('opacity',0.2);
notScrolled = false;
} else if (scrollTop < headerTop && !notScrolled){
$('header').css('opacity',1);
notScrolled = true;
}
});
Demo Fiddle
I have a one page site with fixed navigation and using a scroll script, very similar to this: http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html
What I'm looking for is a way to check what section is viewable in the window to set the active state on the nav when using the browsers scroll bar, any ideas?
Here are all the variables you'll need...
var $myElt = $('.myElement'); // whatever element you want to check
var $window = $(window); // the window jQuery element
var myTop = $myElt.offset().top; // the top (y) location of your element
var windowTop = $window.scrollTop(); // the top of the window
var windowBottom = windowTop + $window.height(); // the bottom of the window
Then to make sure your element is within the window's range...
if (myTop > windowTop && myTop < windowBottom) {
// element is in the window
} else {
// element is NOT in the window
// maybe use this to scroll...
// $('html, body').animate({scrollTop: myTop}, 300);
}
jQuery reference:
http://api.jquery.com/offset/
http://api.jquery.com/height/
http://api.jquery.com/scrollTop/
Use $('#element').offset().top; to detect element top side.
$(window).scrollTop(); to detect current scroll position.
And $(window).height(); to detect current window height.
And after that steps you actually need only something easy math calculations.
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
source: Check if element is visible after scrolling
see the following lazyload plugin:
http://plugins.jquery.com/files/jquery.lazyload.js__6.txt
the section which starts with the comment "return the status of the item relative to the current view" checks to see if an element is visible in the viewport.
If you are using jQuery just try to check the document position
$('html').position().top;
for example:
$(document).bind("scroll", checkLink);
function checkLink(){
/* Position will checked out after 1 sec when user finish scrolling */
var s = setTimeout(function(){
var docHeight = $('html').position().top;
var allLinks = $('.navigation a');
if ( docHeight < 0 && docHeight <= -1000 ) {
allLinks.removeClass('active');
$('a.firstlink').addClass('active');
} else
if ( docHeight < -1000 && docHeight <= -2000 ) {
allLinks.removeClass('active');
$('a.secondlink').addClass('active');
} else { /* .... */ }
$(document).bind("scroll", checkLink);
}, 1000);
$(document).unbind('scroll');
}
but guys in your example haven't held on this for a long time :) they just toggle classes on click
$('#navigation').localScroll();
$('#navigation li a').click( function () {
$('#navigation li a').removeClass("active");
$(this).addClass("active");
});
2022 answer - you don't have to use jQuery anymore for this
Now it is possible to use plain javascript with IntersectionObserver.
The problem with the other answers are that they fire off too many times.
For example you could to this:
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting === true) {
console.log('Element is in the window');
} else {
console.log("Element is not in the window");
}
});
observer.observe(document.querySelector(".myObject"));