Можно ли присвоить класс скрытой области блока?

Question

[Наталия]

Добрый день.
Есть контейнер с 8-мью блоками. В два ряда по 4 штуки.

<div class="content">
   <div class="content-item"> </div>
   <div class="content-item"> </div>
   <div class="content-item"> </div>
   <div class="content-item"> </div>
   <div class="content-item"> </div>
   <div class="content-item"> </div>
   <div class="content-item"> </div>
   <div class="content-item"> </div>
</div>

со стилями:

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-height: 250px;
    overflow: hidden;
}
.content-item {
   height: 100px;
   margin: 10px;
   width: 24%;
}
@media (max-width: 1000px) and (min-width: 700px) {
   .content-item {
      width: calc(33vw - 16px);
   }
}

При уменьшении экрана блоки увеличиваются в размере и видимая область контейнера уже содержит не 8, а 6 блоков.
При этом должна появится надпись "показать остальное", и при клике на нее появляются остальные скрытые блоки.
Можно ли в jquery прописать условие появления какого-либо класса, куда будут "складироваться" скрытые блоки, в зависимости от текущего разрешения экрана и как его правильно выразить?

Описала подробно, чтоб более ясно было для понимания.
Заранее спасибо за ответ.

ПРИМЕРНЫЕ РАЗМЫШЛЕНИЯ ТАКИЕ:
есть массив Х. изначально он пустой.
По мере изменения ширины общего контейнера (со стилем overflow(-y): hidden;), некоторые блоки будут в скрытой зоне.
Нужно будет проверять: Если блок находится в скрытой зоне, то присваиваем ему какой-нибудь класс, и отправляем в массив Х. Но как именно это можно сделать?
И если массив Х содержит элементов больше 0, то отображаем надпись "показать остальное" в заранее отведенном для нее диве.

Comments

[Ярослав Иванов]

пример на jsfiddle

[Наталия]

Ярослав Иванов: в jsfiddle работает некорректно, не так, как то же самое работает локально. Поэтому не стала там делать

[Ярослав Иванов]

Наталия: Все там работает корректно. Настраивать надо. И как помогать, силой мысли ?

[Наталия]

Ярослав Иванов: ну да, были реальные случаи, когда помогали именно так:)) и ведь решался вопрос, хотя наверняка люди тоже предпочли бы получить вопрос в действии )

[Наталия]

Ярослав Иванов: добавила в вопрос свои рассуждения. Может, как-то поможет сориентироваться так.

[Kovalsky]

Наталия: да, и вопрос и апдейт хорошо описывают задачу, но именно это скорее всего и будет причиной по которой вам на данном этапе не помогут: вы уже достаточно детально описали алгоритм решения вашей задачи, настолько что реализация будет просто дословным "переводом" с русского на JS. Так что вероятно вам стоит начать реализовывать решение, опираясь на вами же написанное, а сюда писать только о конкретных возникших проблемах, тогда вам точно помогут.

То же и по поводу jsfiddle: это очень хороший инструмент, если у вас что-то работает в jsfiddle не так как локально, то значит вы где-то накосячили с переносом. Опять же, задавайте конкретные вопросы по поводу jsfiddle, вам помогут.

[Наталия]

Никита Полевой: большое спасибо за ссылку. Изначально был вопрос, потом пришла мысль о том, в какую сторону можно двигаться по его же решению. Вот и добавила в описание. Но как это все можно выразить в целом, пока 100%-ого представления нет)

[Kovalsky]

Наталия: ну вот, теперь в рамках найденного вектора начинайте реализацию сырого варианта, а все проблемные моменты сначала транслируйте в гугл, после чего в случае неудачи - сюда.

[Anton fon Faust]

Наталия:
Вашпе не вижу проблемы.
семь минут работы
и не надо там никакого javascript и тем более jquery.

Answer 1

[Николай Чуприк]

$(window).resize( function() {
  $('.content-item').each( function() {
    if ($(this).offset().top > $(window).height())
      $(this).addClass('out-of-screen');
    else
      $(this).removeClass('out-of-screen');
  });
});

А вообще, если речь только от том, чтобы показать кнопку "показать остальное", то совсем не надо манипулировать с классами внутренних блоков, достаточно определить, что контейнер '.content' оказался по высоте больше экрана, и показать кнопку продолжения.

Более того, не могу придумать ни одного примера, когда требуется манипулировать, специально и особым образом, с классами невидимых на экране блоков.