Java Script - шпаргалка
26 декабря 2016 г.
java-scriptЗдесь буду размещать и постоянно дополнять часто используемые функции java script.
1. Плавная прокрутка до якоря - постоянно использую для перехода в меню на длинных страницах типа landing page.
$("a.scroll_to").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)")
.animate({scrollTop: destination}, 600);
return false;
});
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)")
.animate({scrollTop: destination}, 600);
return false;
});
Применяем для всех ссылок с классом scroll_to, далее получаем у выбраной ссылки атрибут href для перехода к нему, далее получаем положение элемента к которому надо перейти и плавненько со скоростью 600 переходим к нашему элементу. Для работы требуется jQuery.
2. Появление элемента (например панели навигации) при прокрутке страницы.
$(function (f) {
var element = f('.navPanel');
f(window).scroll(function () {
element['fade' + (f(this).scrollTop() > 180 ? 'In' : 'Out')](500);
});
});
var element = f('.navPanel');
f(window).scroll(function () {
element['fade' + (f(this).scrollTop() > 180 ? 'In' : 'Out')](500);
});
});
Тут элемент с классом navPanel будет появляться при скроле страницы более 180px и исчезать при скроле старницы менее 180px с эффектом fade за 500 миллисекунд.
Просмотров - 453
Комментарий будет размещен на сайте после прохождения модерации.