Zmiana CSS wewnętrznego div podczas przewijania osiąga ten div

Question

Próbuję wprowadzić funkcję przewijania, w której CSS wewnętrznego div zmienia się, gdy osiągnie pewną wysokość od góry.

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> 

Obecnie wszystkie wewnętrzne div dostaje zmieniło w tym samym czasie.
Zauważyłem, że po zmianie klasy $container na równą '.first' i określeniu jej więcej, to działa.

Czy istnieje sposób na dokonanie wewnętrznej zmiany div osobno, w stosunku do jej wysokości od góry? W jaki sposób mogę iterować funkcję przewijania, aby móc dodawać więcej wewnętrznych div w przyszłości i nie martwić się o zmianę funkcji przewijania?

Answer 1

Poniżej znajduje się przykładowy fragment kodu, nadzieję, że będzie pracować dla Ciebie:

$(document).ready(function(){ 
 
\t topMax = 100; 
 
    topMin = 25; 
 
    $(document).scroll(function(){ 
 
    $('.inner-div').each(function(){ \t \t 
 
    \t if($(this).offset().top-$(window).scrollTop()<=topMax && $(this).offset().top-$(window).scrollTop()>=topMin){ 
 
     \t $(this).css({'background':'#c7c7c7'}); 
 
     }else{ 
 
     \t $(this).css({'background':'inherit'}); 
 
     } 
 
    \t }); 
 
    }); 
 
});

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>

Chętnie pomożemy! :)

Answer 2

rozważyć użycie 3rd party plugin jQuery dla łatwiejszej pracy, jak jedna z nich:

https://github.com/xobotyi/jquery.viewport

lub

https://github.com/zeusdeux/isInViewport

wtedy może mieć dodatkowe np selektora element: ":in-viewport"

tak można:

$(window).on('scroll',function() { 
    $('div').not(':in-viewport').html(''); 
    $('div:in-viewport').html('hello'); 
}); 

Answer 3

Sprawdź, czy aktualny przewijania przesunięcie od góry jest większy niż element offsetowego od góry:

$(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

Można łatwo zaimplementować to w istniejącym kodzie.

Answer 4

surowca JavaScript, to jest moja odpowiedź:

// 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) 

Jest to metoda używam. Jeśli są inne metody, bardzo chciałbym je zobaczyć, ale na razie to moja odpowiedź.