How to fix a 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 solution on jQuery. Code for an 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 needs to be inserted into a separate js-file or directly into the markup, having framed the <script> code </ script> in the tag.

We'll figure out what's going on here. So the function $ (window) .scroll (function () {}); Monitors window scrolling. The top variable is set to the value of the scroll indent from above $ (document) .scrollTop () ;. Further, it is checked if the value of top is less than 100 pixels, then the element with the .floating class is assigned CSS-styles: relative positioning and indentation from the top - 0 pixels. If, when scrolling the page, the value of top is greater than or equal to 100 pixels, the .floating element is assigned styles: a fixed position and an indent from the top - 10 pixels.

Now when you scroll the page, the menu will always be on top.

The fixed menu in the WordPress sidebar

For WordPress there is an interesting plugin Codeflavors-floating-menu . It can be installed directly from the admin panel of WordPress. Convenient plugin. Works with the standard menu of the site. Has several settings. Easy enough to use. The developer's website has documentation for this plugin.

If you want to make a floating menu on WordPress, then safely use this plugin.

Fixed block / menu in the site's sidebar on jQuery

If you want to make not only a floating menu, but a block with any content fixed, then for this you need to slightly modify the code that is given 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 place the fixed element on the place where it should be located. Additionally, in this example, we also checked for Internet Explorer 7 , because It does not correctly handle position: fixed; .

Do not forget to connect the jQuery library!

By the way, about the library ... Since version 1.9, jQuery does not support the $ .browser function. Therefore, to use this design, you can connect this function as a separate file:

  (Function () {
 
  Var matched, browser;
 
 // Use jQuery.browser is not approved.
 // More information: http://api.jquery.com/jQuery.browser
 // jQuery.uaMatch is 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 the WordPress sidebar

Another alternative, but much more effective: JQuery-plugin hcsticky .

It has many settings, but at the same time, it is easy enough 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, call the method:

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

All. 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 go outside the permitted limits, for example, crawl on a foot.

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

The hcsticky plug-in provides the ability, 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 set to true, the element is positioned relative to the document