This page has been robot translated, sorry for typos if any. Original content here.

Як зафіксувати блок або меню на сайті

Как зафиксировать блок или меню на сайте

Як зробити на сайті фіксоване плаваюче меню або блок.

Існує безліч рішень. Та й написати можна самому, якщо розбираєшся в JavaScript і jQuery.

Фіксована верхнє меню на сайті

Напевно, саме витончене і просте рішення на jQuery. Код для прикладу:

 $ (Function () {$ (window) .scroll (function () {var top = $ (document) .scrollTop (); if (top <100) $ ( ". Floating"). Css ({top: '0 ', position:' relative '}); else $ ( ". floating"). css ({top:' 10px ', position:' fixed '});});}); 

Цей код потрібно вставити в окремий js-файл або прямо в розмітку, обрамити в тег <script> код </ script>.

Розберемо, що тут таке. Отже функція $ (window) .scroll (function () {}); моніторить скроллінгом вікна. Змінної top присвоюється значення відступу прокрутки зверху $ (document) .scrollTop () ;. Далі перевіряється, якщо значення top менше 100 пікселів, то елементу з класом .floating присвоюються CSS-стилі: відносне позиціонування і відступ зверху - 0 пікселів. Якщо при прокручуванні сторінки значення top більше або дорівнює 100 пікселів, то елементу .floating присвоюються стилі: фіксована позиція і відступ зверху - 10 пікселів.

Тепер при прокручуванні сторінки меню завжди буде зверху.

Фіксоване меню в сайдбарі WordPress

Для WordPress існує цікавий плагін codeflavors-floating-menu . Його можна встановити прямо з адмін панелі WordPress. Зручний плагін. Працює зі стандартними меню сайту. Має кілька налаштувань. Досить простий у використанні. На сайті розробника є документація по цьому плагіну.

Якщо Ви хочете зробити саме плаваюче меню на WordPress, то сміливо використовуйте цей плагін.

Фіксований блок / меню в сайдбарі сайту на jQuery

Якщо Ви хочете зробити не тільки плаває меню, а й блок з будь-яким вмістом фіксованим, то для цього Вам потрібно трохи модифікувати той код, який приведений вище.

  $ (Document) .ready (function () {
  var br = $ .browser;
  $ (Window) .scroll (function () {
  var top = $ (document) .scrollTop ();
  if (top <61) {
  $ ( "# Sidebar"). Css ({top: '0', position: 'relative', marginLeft: '25px'});
  } Else if ((! Br.msie) || ((br.msie) && (br.version> 7))) {
  $ ( "# Sidebar"). Css ({top: '22px', position: 'fixed', marginLeft: '535px'});
  } Else if ((br.msie) && (br.version <= 7)) {
  $ ( "# Sidebar"). Css ({top: '22px', position: 'fixed', marginLeft: '25px'});
  }
  });
 });

Цей код точно такий же, але доданий стиль margin-left. Це зроблено для того, щоб фіксований елемент поставити на те місце, на якому він повинен знаходиться. Додатково в даному прикладі також здійснено перевірку для браузера Internet Explorer 7, тому що він не коректно обробляє значення position: fixed; .

Не забувайте підключати бібліотеку jQuery!

До речі, про бібліотеку ... Починаючи з версії 1.9, jQuery не підтримує функцію $ .browser. Тому, щоб використовувати цю конструкцію, можна окремим файлом підключити цю функцію:

  (Function () {
 
  var matched, browser;
 
 // Використовувати jQuery.browser не схвалюється.
 // Детальніше: http://api.jquery.com/jQuery.browser
 // jQuery.uaMatch підтримується для сумісності
 jQuery.uaMatch = function (ua) {
  ua = ua.toLowerCase ();
 
  var match = / (chrome) [\ /] ([\ w.] +) /. exec (ua) ||
  / (Webkit) [\ /] ([\ w.] +) /. Exec (ua) ||
  / (Opera) (?:. * Version |) [\ /] ([\ w.] +) /. Exec (ua) ||
  / (Msie) ([\ w.] +) /. Exec (ua) ||
  ua.indexOf ( "compatible") <0 && /(mozilla)(?:.*? rv :( [\ W.] +) |) /. Exec (ua) ||
  [];
 
  return {
  browser: match [1] ||  "",
  version: match [2] ||  "0"
  };
  };
 
  matched = jQuery.uaMatch (navigator.userAgent);
  browser = {};
 
  if (matched.browser) {
  browser [matched.browser] = true;
  browser.version = matched.version;
  }
 
 // Chrome is Webkit, but Webkit is also Safari.
  if (browser.chrome) {
  browser.webkit = true;
  } Else if (browser.webkit) {
  browser.safari = true;
  }
 
  jQuery.browser = browser;
 
  jQuery.sub = function () {
  function jQuerySub (selector, context) {
  return new jQuerySub.fn.init (selector, context);
  }
  jQuery.extend (true, jQuerySub, this);
  jQuerySub.superclass = this;
  jQuerySub.fn = jQuerySub.prototype = this ();
  jQuerySub.fn.constructor = jQuerySub;
  jQuerySub.sub = this.sub;
  jQuerySub.fn.init = function init (selector, context) {
  if (context && context instanceof jQuery &&! (context instanceof jQuerySub)) {
  context = jQuerySub (context);
  }
 
  return jQuery.fn.init.call (this, selector, context, rootjQuerySub);
  };
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub (document);
  return jQuerySub;
  };
 }) ();

Фіксований блок в сайдбарі WordPress

Ще одна альтернатива, але набагато більш ефективна: jQuery-плагін hcsticky .

Має багато налаштувань, але, в той же час, досить простий у використанні.

Насамперед підключаємо jQuery і сам плагін:

  <! - jQuery -> 
<Script type = "text / javascript" src = "jquery.js"> </ script>
<! - hcSticky script ->
<Script type = "text / javascript" src = "jquery.hcsticky.js"> </ script>

Потім для елемента, який повинен бути плаваючим, викликаємо метод:

 $ ( '# Sidebar'). HcSticky ();

Усе. Тепер блок буде плаваючим.

Цей плагін дуже корисний особливо в тому випадку, якщо Ви хочете зафіксувати високий блок. Але при прокручуванні він не повинен вилазити за дозволені межі, наприклад наповзає на футтер.

Якщо використовувати варіанти, які були описані вище, то блоки / меню будуть наповзає на низ сайт, особливо, коли останній має велику висоту.

В плагіні hcsticky передбачена можливість, так би мовити, зупиняти плаваючий блок на певній відстані від низу сайту. приклад:

 $ (Document) .ready (function () {
  $ ( '# Sidebar'). HcSticky ({
  top: 25,
  bottomEnd: 155,
  noContainer: true
  });
 });

де:

  • top - відступ від верху вікна браузера під час прокручуванні
  • bottomEnd - відступ від нижньої межі сайту, коли сайт прокручений до самого низу
  • noContainer - при значенні true елемент позиціонується щодо документа