JQuery: Скрыть элементы списка, если они уходят с экрана

Question

У меня есть список значков, которые будут моей навигацией по левой стороне страницы. Навигация установлена ​​на 100% от высоты страницы.

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

В основном мой вопрос на данный момент: , если список элементов переполнен с экрана, как я могу найти элементы, которые не подходят и скрывают их?

Answer 1

Вы можете получить элемент offset() и сравнить его с шириной окна.

Так, например, если у вас есть вертикальный список иконок и хотите знать, если видны:

$('nav a').each(function(index)() { 
    if ($(this).offset().top > $(window).height()) { 
     $(this).hide(); 
    } 
}); 

Answer 2

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

.leftNav{ 
    height:80px; 
    overflow-y: hidden; 
    border-style:solid; 
    border-width:1px; 
} 

HTML:

<div class='leftNav'> 
    <div>nav 1</div> 
    <div>nav 2</div> 
    <div>nav 3</div> 
    . 
    . 
    . 
</div> 

Working Demo

Css:

overflow-y: auto; 

можно использовать для отображения полосы прокрутки Demo