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

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

Існує безліч рішень. Та й написати можна самому, якщо розбираєшся в 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 елемент позиціонується щодо документа