jQuery
- Подробности
- Создано: 28.02.2016 16:52
- Просмотров: 3250
Перво-наперво подключаем jQuery один раз для всех случаев: (между <head> и </head>)
<script src="/js/jquery.min.js" type="text/javascript"></script>
где js - папка со скриптами в корне сайта, а jquery.min.js - заранее скачанный файл.
1.) Боковая выезжающая панель
2.) Кнопка "На верх"
Вставить на страницу перед закрывающим тегом head скрипт :
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
Другой вариант — вынести этот сценарий в отдельный файл, с любым названием, к примеру: scroll-to-top.js. предварительно удалив 1-ую и последнюю строчки. А затем подключить его на сайте перед тем же тегом вот таким образом, прописав в src путь до файла:
<script type="text/javascript" src="/./js/scroll-to-top.js"></script>
И третий способ использования, это занести его в js файл, который уже подключен к вашему блогу. Здесь главное запомнить, что вы внесли изменения и в какой именно документ. Для этого рекомендую прямо в файле прописать комментарий, чтобы потом вспомнить какую функцию выполняет этот отрезок кода.
Картинку кнопки нужно загрузить в папку images с темой. Добавляем в файл css :
#scrollup {
position: fixed;
display: none;
left: 16px;
background: url('/../images/scrolling.png')0 51px;
width: 51px;
height: 51px;
left: 90%;
bottom: 10px;
}
#scrollup:hover {background-position: 0 -1px;}
К страницt нужно прописать идентификатор scrolling. Поместить его желательно в футер перед закрывающим тегом </body>.
<a href="#" class="scrollup">Наверх</a>
3.) Прилипающее меню:
Скачиваем (в папку js сайта) и подключаем плагин: http://stickyjs.com/ как и jquery.min.js
<script src="/js/jquery.sticky.js" type="text/javascript"></script>
Смотрим как у вас называется div, который вмещает ваше меню ( у меня это <div id="nav">)
ну и собсна сам скрипт вставляем между <head> и </head>
<script type="text/javascript">
$(window).load(function(){
$('#nav').sticky({topSpacing: 0,});
});
</script>
всё! Может понадобится в css файл в #nav добавить z-index:1000;
Если вы хотите вывести меню в другую позицию - не забудте обернуть её в <div id="nav"> </div>
4.) Плавающий блок
подключаем сам скрипт на странице с идентификатором блока <div id="fixed">. Данный код добавляем в раздел <head>
<script type="text/javascript">
$(function() {
var offset = $("#fixed").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {$("#fixed").stop().animate({marginTop: 0});};});
});
</script>
Другой вариант
Единственным условием является использование двух контейнеров, один из которых (внешний) будет всегда оставаться на месте, а второй (внутренний) как раз будет двигаться вместе с экраном. Это нам нужно для того, чтобы всегда знать начальную позицию плавающего блока до того, как он был сдвинут с помощью скрипта, т.к. это значение используется в формуле вычисления отступа.
<div class="sticky-block">
<div class="inner">
Здесь произвольное содержание блока
</div>
</div>
и сам скрипт
$(window).scroll(function() {
/*----------------------------------
sticky block script by makeasite.ru
----------------------------------*/
var sb_m = 20; /* отступ сверху и снизу */
var mb = 300; /* высота подвала с запасом */
var st = $(window).scrollTop();
var sb = $(".sticky-block");
var sbi = $(".sticky-block .inner");
var sb_ot = sb.offset().top;
var sbi_ot = sbi.offset().top;
var sb_h = sb.height();
if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
if(st > sb_ot) {
var h = Math.round(st - sb_ot) + sb_m;
sb.css({"paddingTop" : h});
}
else {
sb.css({"paddingTop" : 0});
}
}
});