We Keep Coding

Change CSS of inner div when scroll reaches that div

I am attempting to implement a scroll function where the CSS of the inner div's change when it reaches a certain height from the top.
var $container = $(".inner-div");
var containerTop = $container.offset().top;
var documentTop = $(document).scrollTop();
var wHeight = $(window).height();
var minMaskHeight = 0;
var descriptionMax = 200;
var logoMin = -200;
var maskDelta = descriptionMax - minMaskHeight;
var $jobOverview = $container.find(".right");
var $jobLogo = $container.find(".left");
var curPlacementPer = ((containerTop - documentTop) / wHeight) * 100;
var topMax = 85;
var center = 20;
var bottomMax = -15;
//console.log("Placement: " + curPlacementPer);
function applyChanges(perOpen) {
var maskHeightChange = maskDelta * (perOpen / 100);
var opacityPer = perOpen / 100;
var newDescriptionLeft = descriptionMax - maskHeightChange;
var newLogoLeft = logoMin + maskHeightChange;
if (newDescriptionLeft <= 0) newDescriptionLeft = 0;
if (newLogoLeft >= 0) newLogoLeft = 0;
if (opacityPer >= 1) opacityPer = 1;
$jobOverview.css({
transform: "translate(" + newDescriptionLeft + "%,-50%)",
opacity: opacityPer
});
$jobLogo.css({
transform: "translate(" + newLogoLeft + "%,-50%)",
opacity: opacityPer
});
}
if (window.innerWidth > 640) {
$container.removeClass("mobile");
// console.log("Placement: " + curPlacementPer);
if (curPlacementPer <= topMax /*&& curPlacementPer >= center*/ ) {
var perOpen = ((topMax - curPlacementPer) / 25) * 100;
applyChanges(perOpen);
} else if (curPlacementPer < center /*&& curPlacementPer >= bottomMax*/ ) {
var perOpen = (((bottomMax - curPlacementPer) * -1) / 25) * 100;
applyChanges(perOpen);
} else {
$jobOverview.css({
transform: "translate(200%,-50%)",
opacity: "0"
});
$jobLogo.css({
transform: "translate(-300%,-50%)",
opacity: "0"
});
}
<div class="outer-div">
<div class="inner-div first">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div second">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div third">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div fourth">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
Currently, all of the inner div's gets changed at the same time.
I noticed that when I change the $container class to equal '.first' and specify it more, it works.
Is there any way to make the inner div's change separately, relative to its height from the top? Any way I can iterate the scroll function so I can add more inner div's in the future and not have to worry about changing my scroll function?

In raw JavaScript, this is my answer:
// Define the element -- The '#fooBar' can be changed to anything else.
var element = document.querySelector("#fooBar");
// Define how much of the element is shown before something happens.
var scrollClipHeight = 0 /* Whatever number value you want... */;
// Function to change an element's CSS when it is scrolled in.
const doSomething = function doSomething() {
/** When the window vertical scroll position plus the
* window's inner height has reached the
* top position of your element.
*/
if (
(window.innerHeight + window.scrollY) - (scrollClipHeight || 0) >=
element.getBoundingClientRect().top
)
// Generally, something is meant to happen here.
element.style = "/* Yay, some CSS! */"
};
// Call the function without an event occurring.
doSomething();
// Call the function when the 'window' scrolls.
addEventListener("scroll", doSomething, false)
This is the method I use. If there are other methods, I'd love to see them as well but this is my answer for now.

consider using 3rd party jQuery plugin for easier job, like one of these:
https://github.com/xobotyi/jquery.viewport
or
https://github.com/zeusdeux/isInViewport
then you can have additional element selector e.g.: ":in-viewport"
so you can:
$(window).on('scroll',function() {
$('div').not(':in-viewport').html('');
$('div:in-viewport').html('hello');
});

Check if current scroll offset from top is bigger than the element offset from the top:
$(window).scroll(function() {
var height = $(window).scrollTop();
var element = $('#changethis'); //change this to your element you want to add the css to
if(height > element.offset().top) {
element.addClass('black'); //add css class black (change according to own css)
}
});
Html:
<div id="changethis">Test</div>
Css:
body
{
height:2000px;
}
.black
{
background-color:black;
color:white;
padding:20px;
}
Demo:
https://codepen.io/anon/pen/WZdEap
You could easily implement this in your existing code.

Below is the sample snippet code, Hope it'll work for you:
$(document).ready(function(){
topMax = 100;
topMin = 25;
$(document).scroll(function(){
$('.inner-div').each(function(){
if($(this).offset().top-$(window).scrollTop()<=topMax && $(this).offset().top-$(window).scrollTop()>=topMin){
$(this).css({'background':'#c7c7c7'});
}else{
$(this).css({'background':'inherit'});
}
});
});
});
div{
width:100%;
border:1px solid red;
padding:5px;
}
div.inner-div{
border: 1px dashed green;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-div">
<div class="inner-div first">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div second">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div third">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="inner-div fourth">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
Happy to help you! :)

How to make an element scroll between two points [duplicate]

This question already has answers here:
Stop div scrolling once it reaches another div
(2 answers)
Closed 5 years ago.
I need to heading to scroll with the user, however only between two points. So scroll from its starting position with the user, to a certain position (above the contact us container) and then back with the user up.
Here is the current code used, this allows the heading to scroll until a certain point as required however does not scroll back up when the user scrolls up.
HTML:
<div id="header" class="row">
<div class="col-sm-5">
<h1 id="scrollwith">Our Services.</h1>
</div>
<div class="col-sm-6 col-sm-offset-1">
<img src="images/backdroppattern.png" style="width: 100%; height: 3000px;">
</div>
</div>
</div>
<div id="contact-container">
<div class="row">
<div class="col-sm-12">
<a class="contact-link" href="#"><h2>Contact us ➔</h2></a>
</div>
</div>
</div>
JS:
$(document).ready(function(){
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed'
});
}
});
};
$('#scrollwith').followTo(2700);
});

All credits to this answer goes to #MicronXD from the post here.
jQuery.fn.extend({
followTo: function(elem, marginTop) {
var $this = $(this);
var $initialOffset = $this.offset().top;
setPosition = function() {
if ($(window).scrollTop() > $initialOffset) {
if (elem.offset().top > ($(window).scrollTop() + $this.outerHeight() + marginTop)) {
$this.css({
position: 'fixed',
top: marginTop
});
}
if (elem.offset().top <= ($(window).scrollTop() + $this.outerHeight() + marginTop)) {
$this.css({
position: 'absolute',
top: elem.offset().top - $this.outerHeight()
});
}
}
if ($(window).scrollTop() <= $initialOffset) {
$this.css({
position: 'relative',
top: 0
});
}
}
$(window).resize(function() {
setPosition();
});
$(window).scroll(function() {
setPosition();
});
}
});
$('#scrollwith').followTo($('#contact-container'), 0);
#contact-container {
background: red;
height: 900px;
}
#scrollwith {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="row">
<div class="col-sm-5">
<h1 id="scrollwith">Our Services.</h1>
</div>
<div class="col-sm-6 col-sm-offset-1">
<img src="images/backdroppattern.png" style="width: 100%; height: 3000px;">
</div>
</div>
<div id="contact-container">
<div class="row">
<div class="col-sm-12">
<a class="contact-link" href="#">
<h2>Contact us ➔</h2>
</a>
</div>
</div>
</div>

Fade in/out on scroll divs are invisible [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Basically, what I want to happen is a class of divs to fade in/out on scroll. It seems to work perfectly on this jsfiddle page.
The only change I made to the code was adding this plug-in, but it still doesn't seem to work, and the posts are just invisible:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Am I perhaps using the wrong plug-in?

Did you include the JavasScript?
$(window).on("load",function() {
function fade() {
$('.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 object is completely visible in 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);}
}
});
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll
});
Did you call the script after jQuery loaded?
Did you include the CSS?
.fade {
margin: 50px;
padding: 50px;
background-color: lightgreen;
opacity: 0;
}
Did you include the HTML?
<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>
Did you make it HTML5?
Here is the complete code to make it work.
$(window).on("load",function() {
function fade() {
$('.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 object is completely visible in 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);}
}
});
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll
});
.fade {
margin: 50px;
padding: 50px;
background-color: lightgreen;
opacity: 0;
}
<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>

Include jquery sourcefile in head portion, You have to load jquery file first.
<head><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script></head>
You have to load jquery before running the snippet of code
$(window).on("load",function() {
function fade() {
$('.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 object is completely visible in 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);}
}
});
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll
});

Show Div when scrolled to top edge not bottom edge

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)

Run a JS function while in viewport.

I've found on here how to do a counter, and I will be using it on a scrolling site.
I'm using the following code:
$(function() {
function count($this){
var current = parseInt($this.html(), 10);
$this.html(++current);
if(current !== $this.data('count')){
setTimeout(function(){count($this)}, 10);
}
}
$("span").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
});
I've tried to include the following code, but I'm not sure I'm adding it correctly:
if ($('element').visible(true)) {
}
Heres a link to the Jfiddle that is currently working without the if statement. Any help would be appreciated.
http://jsfiddle.net/WpJxn/257/

This is what you should look at: Check if element is visible after scrolling
Here is an example for you that demonstrates this technique: http://jsfiddle.net/XYS2G/ - just try to scroll the Result window.
HTML:
<div class="indicators">
<span class="indicator" data-id="section1">section1</span>
<span class="indicator" data-id="section2">section2</span>
<span class="indicator" data-id="section3">section3</span>
<span class="indicator" data-id="section4">section4</span>
<span class="indicator" data-id="section5">section5</span>
<span class="indicator" data-id="section6">section6</span>
</div>
<div class="sections">
<div class="section" id="section1">section1</div>
<div class="section" id="section2">section2</div>
<div class="section" id="section3">section3</div>
<div class="section" id="section4">section4</div>
<div class="section" id="section5">section5</div>
<div class="section" id="section6">section6</div>
</div>
CSS:
.indicators { position: fixed; }
.section { height: 150px; }
JavaScript:
function isScrolledIntoView(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));
}
function refreshIndicators() {
$('.indicator').each(function () {
if (isScrolledIntoView($('#' + $(this).attr('data-id')))) {
$(this).css('color', 'red');
} else {
$(this).css('color', 'black');
}
});
}
refreshIndicators();
$(window).bind('scroll', refreshIndicators);