Thay đổi CSS của div bên trong khi cuộn đến div đó

Question

Tôi đang cố gắng triển khai chức năng cuộn nơi CSS của thay đổi div bên trong khi nó đạt đến một độ cao nhất định từ trên cùng.

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> 

Hiện nay, tất cả các nhân bên trong div được thay đổi cùng một lúc.
Tôi nhận thấy rằng khi tôi thay đổi lớp $container thành bằng '.first' và chỉ định nó nhiều hơn, nó hoạt động.

Có cách nào để thực hiện thay đổi div bên trong một cách riêng biệt, liên quan đến chiều cao của nó từ đầu? Bất kỳ cách nào tôi có thể lặp lại các chức năng di chuyển vì vậy tôi có thể thêm nhiều div bên trong trong tương lai và không phải lo lắng về việc thay đổi chức năng cuộn của tôi?

Answer 1

Dưới đây là đoạn mã mẫu, Hy vọng nó sẽ làm việc cho bạn:

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

hạnh phúc để giúp bạn! :)

Answer 2

xem xét sử dụng bên thứ 3 jQuery plugin cho công việc dễ dàng hơn, như một trong những:

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

hoặc

https://github.com/zeusdeux/isInViewport

sau đó bạn có thể có thêm chọn yếu tố ví dụ như: ":in-viewport"

để bạn có thể:

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

Answer 3

Kiểm tra xem cuộn hiện bù đắp từ đầu là lớn hơn các yếu tố bù đắp từ trên xuống:

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

Bạn có thể dễ dàng thực hiện điều này trong mã hiện tại của bạn.

Answer 4

Trong nguyên JavaScript, đây là câu trả lời của tôi:

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

Đây là phương pháp tôi sử dụng. Nếu có những phương pháp khác, tôi rất muốn nhìn thấy chúng nhưng đây là câu trả lời của tôi cho đến bây giờ.