I am using the code from here but i need it to show the div when the top scrolls into view not the bottom, how can i achieve this?
JS Fiddle
$(document).ready(function() {
$(window).scroll( function(){
$('.hide').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
Simple fix. The trick is to .animate() when you actually hit the top. Right now, you're using
var bottom_of_object = $(this).position().top + $(this).outerHeight()
You don't need $(this).outerHeight() because that increases the y position to which you need to scroll by the height of the div. Just remove it so that you have
var top_of_object = $(this).position().top
$(document).ready(function() {
$(window).scroll(function() {
$('.hide').each(function(i) {
var bottom_of_object = $(this).position().top
var bottom_of_window = $(window).scrollTop() + $(window).height()
if (bottom_of_window > bottom_of_object)
$(this).animate({ opacity: '1' }, 500)
})
})
})
#container { height: 2000px }
#container div { background-color: gray; margin: 20px; padding: 80px }
.hide { opacity: 0 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div>shown</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
<div class="hide">Fade In</div>
</div>
fiddle (for posterity)
Related
js and html are not my strong suit but I'm trying to achieve a two simplish effects on the same page.
The user scrolls down the page and the background image/background colour changes as the divs come into view and then leave the screen.
The colors (.panel class) are working great but the image (.fadeimage) is not working at all.
HTML:
<div class="fadeimage">
<h2>image panel</h2>
</div>
<div class="panel" data-color="green">
<h2>Indigo panel</h2>
</div>
<div class="panel" data-color="blue">
<h2>Blue panel</h2>
</div>
<div class="fadeimage">
<h2>image panel</h2>
</div>
<div class="panel" data-color="yellow">
<h2>Yellow panel</h2>
</div>
CSS:
body {
color: #000;
background-color: #f4f4f4;
transition: background-color 1s ease;
}
.panel {
min-height: 100vh;
}
.fadeimage {
opacity: 0;
transition: 0.3s;
background-image: url("/New Page/images/testtakeall.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* colours */
.color-blue {
background-color: #2F8FED;
}
.color-green {
background-color: #4DCF42;
}
.color-yellow {
background-color: #FAEB33;
}
JS: EDITED: This this function breaks while $fadeimage.each(...) is included... it works if I remove it... but obviously this means no image fadein.
$(window).scroll(function() {
// selectors
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
// Change 33% earlier than scroll position so colour is there when you arrive.
var scroll = $window.scrollTop() + ($window.height() / 3);
$fadeimage.each(function () {
var $this = $this;
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$this.css('opacity', 1);
}
else {$this.css('opacity', 0)}
})
$panel.each(function () {
var $this = $(this);
// if position is within range of this panel.
// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
// Remember we set the scroll to 33% earlier in scroll var.
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Remove all classes on body with color-
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
// Add class of currently active div
$body.addClass('color-' + $(this).data('color'));
}
}).scroll();
The opacity of the divs with .fadeimage as a class just stays at 0 the whole time...
You can't use two scroll functions for same document. Instead, try to move everything in one scroll function:
$(window).scroll(function () {
// Add $fadeimage to these variables
var $window = $(window),
$body = $("body"),
$panel = $(".panel"),
$fadeimage = $(".fadeimage");
var scroll = $window.scrollTop() + $window.height() / 3;
$panel.each(function () {
var $this = $(this);
if ( $this.position().top <= scroll && $this.position().top + $this.height() > scroll ) {
$body.removeClass(function (index, css) {
return (css.match(/(^|\s)color-\S+/g) || []).join(" ");
});
$body.addClass("color-" + $(this).data("color"));
}
});
$fadeimage.each(function () {
var $this = $this;
if ( $this.position().top <= scroll && $this.position().top + $this.height() > scroll ) {
$this.css("opacity", 1);
} else {
$this.css("opacity", 0);
}
});
}).scroll();
This is a variation of others topics, the idea is to assign a .js-visible to any element in the DOM, and only when it is visible assign to it a .visible class.
The tricky part is that as all of the elements are using the same class name .js-visible I need to assign the class .visible to only the visible element and ignore all the other DOM elements with the same class name. If it was visible and is not anymore then remove the class name .visible
<style>
.visible {
background: green;
}
</style>
<div class="js-visible" style="height:800px">I am 1st</div>
<div class="js-visible" style="height:800px">I am 2nd</div>
<div class="js-visible" style="height:800px">I am 3rd</div>
<div class="js-visible" style="height:800px">I am 4th</div>
This is not working as desired
$(window).scroll(function() {
var hT = $('.js-visible').offset().top,
hH = $('.js-visible').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
$('.js-visible').addClass('visible')
} else {
$('.js-visible').removeClass('visible')
}
});
Any suggestions?
Based on your code, this function seems to work.
You need to check each element individually.
$(window).scroll(function() {
var wH = $(this).height(),
wS = $(this).scrollTop();
$('.js-visible').each(function() {
var hT = $(this).offset().top,
hH = $(this).outerHeight();
if (wS >= (hT+hH-wH) && (hT >= wS) && (wS+wH >= hT+hH)){
$(this).addClass('visible')
} else {
$(this).removeClass('visible')
}
});
});
.visible {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.visible {
background: green;
}
</style>
<div class="js-visible" style="height:200px">I am 1st</div>
<div class="js-visible" style="height:200px">I am 2nd</div>
<div class="js-visible" style="height:200px">I am 3rd</div>
<div class="js-visible" style="height:200px">I am 4th</div>
I would like to post a demo of the solution for who needs the same solution, you can adapt to your project
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
$('.js-visible').each(function() {
var activeColor = $(this).attr('id');
if ($(this).isInViewport()) {
$(this).addClass('visible');
} else {
$(this).removeClass('visible');
}
});
});
.visible {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="js-visible" style="height:800px">I am 1st</div>
<div class="js-visible" style="height:800px">I am 2nd</div>
<div class="" style="height:800px">I am something else</div>
<div class="" style="height:800px">I am something else</div>
<div class="js-visible" style="height:800px">I am 3rd</div>
<div class="js-visible" style="height:800px">I am 4th</div>
I have tried to add a .fadeIn effect to a script instead of .animate, but it doesn't work. Basically, I try to make fading in elements when you scroll to them. This is the script and HTML:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Check the location of each desired element */
$('.hideme').each(function(i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
$(this).animate({
'opacity': '1'
}, 1500);
}
});
});
});
.hideme {
opacity: 0;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Check the location of each desired element */
$('.hideme').each(function(i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
$(this).fadeIn(400, function(){
$(this).css('opacity', 1)
});
}
});
});
});
.hideme {
opacity: 0;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
<div class="hideme">
<p>This is some text.</p>
</div>
I have this code, if scroll down Fade in and show the object
css:
.fadeInBlock {
opacity:0;
}
js:
$(function() {
$(window).scroll( function(){
$('.fadeInBlock').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 200;
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
and need solution to fade out the object after scroll up.
Please advise, thank you
Maybe something like this will help
function isVisible(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function() {
console.log('scroll')
$('.fadeInBlock').each(function(i) {
if (isVisible(this)) {
$(this).animate({
'opacity': '1'
}, 1000);
} else {
$(this).css({
'opacity': '0'
});
}
});
});
https://jsfiddle.net/32feyrhy/4/
$(window).on("load",function() {
$(window).scroll(function() {
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}); $(window).scroll(); //invoke scroll-handler on page-load
});
.fade {
margin: 50px;
padding: 50px;
background-color: lightgreen;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<div class="fade">Fade In 01</div>
<div class="fade">Fade In 02</div>
<div class="fade">Fade In 03</div>
<div class="fade">Fade In 04</div>
<div class="fade">Fade In 05</div>
<div class="fade">Fade In 06</div>
<div class="fade">Fade In 07</div>
<div class="fade">Fade In 08</div>
<div class="fade">Fade In 09</div>
<div class="fade">Fade In 10</div>
</div>
Please check this link:-Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window
I want to implement this codes
but it doesn't work for me , every things is ok but "Fade in" divs not showing for me. can anyone help me why it doesn't work ?
I try it in MVC5 application , adding scripts in mvc5 is difference with other versions ?!
HTML :
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
</div>
CSS :
#container
{
height:2000px;
}
#container DIV
{
margin:50px;
padding:50px;
background-color:lightgreen;
}
.hideme
{
opacity:0;
}
JavaScript:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
this is Demo in jsfiddle