Добавьте класс, когда div равен x количеству пикселей в верхней части области просмотра.

Question

Я хотел бы добавить класс к div, когда он находится, например, в 100 пикселях от вершины области просмотра. Так что не после прокрутки 100px, а когда она на 100px ниже верхней части области просмотра. Кто-нибудь может мне помочь с этим?

<script>
jQuery(function() {
    //caches a jQuery object containing the header element
    var header = jQuery('#v0');
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 2939) {
            header.addClass('fixed1');
 }

    else {
            header.removeClass('fixed1');
        }
    });
});
</script>

Answer 1

Не уверен, что именно этого вы хотите достичь, но вот код. Если заголовок находится на расстоянии более 100 пикселей от верхней части окна (что не очень обычно, потому что в верхней части заголовка должно быть что-то) окна, то в заголовок добавляется новый класс.

$(function() {  
  var $header = $('#v0');
  $(window).scroll(function () { 
    if ($header.offset().top - $(this).scrollTop() > 100) {
      $header.addClass('blabla');
    } else {
      $header.removeClass('blabla');
    }
  });
});

ОБНОВЛЕНИЕ: В зависимости от ваших отзывов, это первое решение, которое пришло мне в голову. Я думаю, что такое поведение вам нужно. Надеюсь, что это работает для вас:

$(function() {  
  var $header = $('header');
  var $video = $('#v0');
  var $videoContainer = $('.videoContainer');

  $(window).scroll(function () {
    // Here we check if video field touches the header, and add 'fixed' class
    if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
      $video.addClass('fixed')
    }
    // Since both video and header is fixed now I needed some other
    // element to check if we are again getting away from the header
    // (scrolling up again) That's why I added the $videoContainer element 
    // to be able to remove the 'fixed' class.
    if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
      $video.removeClass('fixed');
    }
  });
});

Обновленный код: https://jsbin.com/foyoyus/6/edit?html,css,js,output