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

How to fix the block or menu on the site

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

How to make a fixed floating menu or block on the site.

There are many solutions. Yes, and you can write yourself, if you understand JavaScript and jQuery.

Fixed top menu on the site

Probably the most elegant and simple jQuery solution. Code for example:

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

This code must be inserted into a separate js-file or directly into the markup, having enclosed the code </ script> in the <script> tag.

We will understand what is here. So the function $ (window) .scroll (function () {}); monitors window scrolling. The variable top is assigned the value of the scroll indent at the top $ (document) .scrollTop () ;. Then it is checked if the top value is less than 100 pixels, then the CSS-style element is assigned to the .floating class: relative positioning and indent from the top are 0 pixels. If, when scrolling the page, the value of top is greater than or equal to 100 pixels, then the .floating element is assigned the styles: fixed position and indent from above - 10 pixels.

Now when scrolling the menu page will always be on top.

WordPress Sidebar Fixed Menu

There is an interesting plugin for WordPress codeflavors-floating-menu . It can be installed directly from the WordPress admin panel. Convenient plugin. Works with standard site menus. It has several settings. Easy enough to use. On the developer’s website there is documentation on this plugin.

If you want to make a floating menu on WordPress, feel free to use this plugin.

Fixed block / menu in jQuery site bar

If you want to make not only a floating menu, but also a block with any content fixed, then for this you will need to slightly modify the code shown above.

  $ (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'});
  }
  });
 });

This code is exactly the same, but the margin-left style is added. This is done in order to put a fixed element in the place where it should be. Additionally, in this example, a check was also performed for Internet Explorer 7 , since it does not correctly handle the value of position: fixed; .

Do not forget to connect the jQuery library!

By the way, about the library ... Starting from version 1.9, jQuery does not support the $ .browser function. Therefore, to use this design, you can enable this function in a separate file:

  (function () {
 
  var matched, browser;
 
 // Use jQuery.browser is not approved.
 // Read more: http://api.jquery.com/jQuery.browser
 // jQuery.uaMatch supported for compatibility
 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;
  };
 }) ();

Fixed block in WordPress sidebar

Another alternative, but much more effective: jQuery hcsticky plugin .

It has a lot of settings, but at the same time, is quite simple to use.

First of all, we connect jQuery and the plugin itself:

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

Then for the element that should be floating, we call the method:

 $ ('# sidebar'). hcSticky ();

Everything. Now the block will be floating.

This plugin is very useful especially if you want to fix a high block. But when scrolling, it should not get out beyond the permitted limits, for example, crawl onto a footer.

If you use the options that were described above, the blocks / menu will crawl to the bottom of the site, especially when the latter has a greater height.

The hcsticky plugin provides the opportunity, so to speak, to stop the floating block at a certain distance from the bottom of the site. Example:

 $ (document) .ready (function () {
  $ ('# sidebar'). hcSticky ({
  top: 25,
  bottomEnd: 155,
  noContainer: true
  });
 });

Where:

  • top - indent from the top of the browser window while scrolling
  • bottomEnd - indent from the bottom of the site when the site is scrolled to the bottom
  • noContainer - if true, the element is positioned relative to the document