Changez le CSS de la div interne quand le scroll atteint ce div

Question

J'essaye d'implémenter une fonction de défilement où le CSS du div intérieur change quand il atteint une certaine hauteur du dessus.

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> 

Actuellement, toutes les années lintérieur div se change en même temps.
J'ai remarqué que lorsque je change la classe $container pour égaler '.first' et le spécifier plus, cela fonctionne.

Y a-t-il un moyen de rendre le div interne séparément, par rapport à sa hauteur du haut? De toute façon je peux itérer la fonction de défilement afin que je puisse ajouter plus de div interne dans le futur et ne pas avoir à me soucier de changer ma fonction de défilement?

Answer 1

est Ci-dessous le code extrait de l'échantillon, l'espoir que ça va marcher pour vous:

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

heureux de vous aider! :)

Answer 2

envisager d'utiliser 3ème partie plugin jQuery pour faciliter la tâche, comme l'un de ceux-ci:

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

ou

https://github.com/zeusdeux/isInViewport

vous peut avoir sélecteur d'élément supplémentaire, par exemple: ":in-viewport"

vous pouvez donc:

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

Answer 3

Vérifiez si défilement courant de décalage du haut est plus grand que l'élément décalé par rapport à la partie supérieure:

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

Démo: https://codepen.io/anon/pen/WZdEap

Vous pouvez facilement mettre en œuvre dans votre code existant.

Answer 4

En JavaScript brut, voici ma réponse:

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

Ceci est la méthode que je l'utilise. S'il y a d'autres méthodes, j'aimerais les voir aussi mais c'est ma réponse pour l'instant.