Не так давно в моем блоге появилось
дополнительное фиксированное меню, которое отображается и скрывается в документе при определенных условиях. В него я поместил копию уже существующего блока с категориями разделов (правый верхний блок), при помощи метода $.clone() библиотеки jQuery.
Метод $.clone()
Метод
$.clone() предназначен для создания копии элементов обернутого набора.
Листинг 1
clone(copyHandlers)
Параметр
copyHandlers принимает логические значения true, false. Если параметр имеет значение true, то вместе с элементами будут скопированы все обработчики событий (если таковые имеются), если false то обработчики событий соответственно скопированы не будут.
Листинг 2
$("селектор1").clone(true).prependTo("селектор2");
В листинге 2 приведен пример по клонированию. Все элементы обернутого набора и их события попадающие под условие селектора 1 клонируются в элемент указанный в селекторе 2,
HTML
Переходя к созданию фиксированного меню с клонированным содержанием, в структуре документа необходимо выделить основные блоки:
Блок, источник содержания <div id="Categories"></div>
Фиксированный блок, в который будет помещена копия содержания из источника <div id="CategoriesClone"></div>
Листинг 3. Содержимое блока источника.
<div id="Categories" class="Categories">
<ul>
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>
<li><a href="#">Категория 5</a></li>
<li><a href="#">Категория 6</a></li>
</ul>
</div>
Также в документ необходимо поместить еще два блока, которые служат для задания границ ограничения видимости фиксированного блока:
<div id="top">…</div> - верхняя граница
<div id="bottom">…</div> - нижняя границы
jQuery
Далее представлен код на jQuery, для клонирования содержания из источника в фиксированный блок, а также для задания условий, отображения фиксированного блока на экране.
Листинг 4
<script type="text/javascript">
$(document).ready(function(){
//Фиксированный блок, содержащий клонированные категории скрывается с экрана
$("#CategoriesClone").css("display","none");
//Код, находящийся в функции выполняется при скроллинге мыши
$(window).scroll(function () {
/*
Далее определяются переменные содержащие значения пределов в документе (верхний, нижний) переходя за которые фиксированный блок с категориями либо отображается, либо скрывается
*/
//Верхний предел
var PredelTOP=$("#top").offset().top+$("#top").height()+10;
//Нижний предел
var PredelBOTTOM=$("#bottom").offset().top;
/*
Если значение координаты по оси Y текущего положения документа больше верхнего предела и меньше нижнего предела, то фиксированное меню отображается на экране
*/
if (PredelTOP<$(document).scrollTop() &&
PredelBOTTOM>($(document).scrollTop()+$(window).height())){
if ($("#CategoriesClone").css("display")=="none"){
//Клонирование категорий и фиксация блока с помощью CSS свойств
$("#Categories")
.children()
.clone(true)
.appendTo($("#CategoriesClone"))
.parent()
.css({
"position":"fixed",
"top":"10px",
"z-index":"100"
})
.fadeIn();
}
//Иначе фиксированное меню скрывается с экрана
}else{
if ($("#CategoriesClone").css("display")=="block")
$("#CategoriesClone").hide().children().remove();
}
});
//При клике на категорию, на экране отображатся сообщение
$("div.Categories a").click(function(){
alert($(this).text());
return false;
});
});
</script>