Content

jQuery

Обновлено 28 Февраль 2016 Просмотров: 2201

Перво-наперво подключаем 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});
}
}
});


виды клематисов
Visitor heat map tracker, live visitor tracking, real time visitor counter