Появление и исчезновение элементов при прокрутке страницы JQuery

Нужно было сделать фиксированный элемент который при скроле страницы вниз на 250px появлялся с идентификатором hidden_block.

В интернете множество способов как это сделать, для себя отметил 2 варианта с помощью opacity и display:none.

Подключаем библиотеку:

1

<script src="http://code.jquery.com/ jquery-1.9.1.js"></script>

1 вариант — opacity

Стили для скрывающего блока:

1
2
3
4
5
6
7

#hidden_block {
width: 50px;
height: 50px;
background: #FF0000;
opacity: 0;
position: fixed;
}

Скрипт который будет скрывать:

1
2
3
4
5
6
7

 $(function () {
var element = $("#hidden_block"), display;
$(window).scroll(function () {
display = $(this).scrollTop() >= 250;
display != element.css('opacity') && element.stop().animate({ 'opacity': display }, 500);
});
});

И сам див:

1
2
3
4
5

<!-- hidden_block -->
 
<div id="hidden_block">Скрывающийся блок с помощью opacity</div>
 
<!-- hidden_block -->

Пример:

Смотреть пример в HTML

Пришлось переделать на второй вариант т.к. Блок скрывался, но по сути был доступен, и из-за этого при наведении на ту часть где скрыт блок, он перекрывал меню в том месте и ей нельзя было пользоваться.

2 вариант — display:none

Меняем opacity: 0; на display:none;

1
2
3
4
5

#hidden_block{
width: 100%;
display:none;
position: fixed;
}

Заменяем скрипт на:

1
2
3
4
5
6
7
8
9
10
11

$(function () {
var element = $("#hidden_block"), display;
$(window).scroll(function () {
display = $(this).scrollTop() >= 250;
if(display){
element.show();
}else{
element.hide();
}
});
});

Див не меняется.

Пример:

Смотреть пример в HTML

Как мы видим, второй вариант более практичный, при скрытом блоке, он не мешает элементам которые находятся под ним как в варианте с opacity.