当滚动达到该div时更改内部div的CSS

Question

我试图实现滚动功能，其中内部div的CSS在从顶部到达特定高度时发生更改。

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> 

目前，所有内部div的在同一时间得到改变。
我注意到，当我将$container类更改为等于'.first'并指定它时，它可以工作。

有没有什么办法让内部div的变化分开，相对于顶部的高度？任何方式我可以迭代滚动功能，所以我可以在将来添加更多的内部div，而不必担心更改我的滚动功能？

Answer 1

下面是示例代码段，希望它会为你工作：

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

竭诚为您服务！ :)

Answer 2

考虑使用第三方jQuery插件，方便的工作，如这一个：

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

或

https://github.com/zeusdeux/isInViewport

那么你可以有额外的元件选择如：":in-viewport"

，所以你可以：

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

Answer 3

检查当前的滚动距离顶偏比元件从顶部偏移较大：

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

演示： https://codepen.io/anon/pen/WZdEap

你可以很容易地实现这在现有的代码。

Answer 4

在原始的JavaScript，这就是我的回答：

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

这是我使用的方法。如果还有其他方法，我很乐意看到它们，但这是我现在的答案。