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?

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?

• javascript
• jquery
• html
• css
• scroll

Share Improve this question Follow edited Jan 11, 2018 at 1:02 Etep asked Sep 26, 2017 at 20:41 EtepEtep 3,66144 gold badges2121 silver badges3030 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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./xobotyi/jquery.viewport

or

https://github./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./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! :)