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

考虑使用第三方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 2

在原始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)

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

Answer 3

以下是示例代码段，希望它能为您效劳：

＆＃13;

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

＆＃13;

div{
  width:100%;
  border:1px solid red;
  padding:5px;
}
div.inner-div{
  border: 1px dashed green;
  height: 100px;
}

＆＃13;

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

＆＃13;

很高兴为您服务！：）

Answer 4

检查顶部的当前滚动偏移量是否大于顶部的元素偏移量：

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

您可以在现有代码中轻松实现此功能。

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

4 个答案: