Измените CSS внутреннего div, когда свиток достигает этого div

Ответ 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');
});

Ответ 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 CSS when it is scrolled in.
const doSomething = function doSomething() {

    /** When the window vertical scroll position plus the
     *   window 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)

Это метод, который я использую. Если есть другие методы, я бы тоже хотел их увидеть, но пока это мой ответ.

Ответ 3

Ниже приведен пример кода фрагмента кода, надеюсь, он сработает для вас:

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

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>

Ответ 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

Вы можете легко реализовать это в своем существующем коде.