Bs Affix

-

Bootstrap Affix Plugin (Advanced)

The Affix Plugin

The Affix plugin allows an chemical gene to teach affixed (locked) to an expanse on the page. This is oft used amongst navigation menus or social ikon buttons, to brand them "stick" at a specific expanse spell scrolling upward as well as downward the page.
The plugin toggles this demeanor on as well as off (changes the value of CSS position from static to fixed), depending on scroll position.
Example 1) An affixed navbar:
Example 2) An affixed sidebar:
With Affix, when nosotros scroll upward as well as downward the page, the bill of fare is ever visible as well as locked inwards its position.

How To Create an Affixed Navigation Menu

The next instance shows how to exercise a horizontal affixed navigation menu:

Example

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
The next instance shows how to exercise a vertical affixed navigation menu:

Example

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

Example Explained

Add data-spy="affix" to the chemical gene you lot desire affixed.
Optionally, add together the data-offset-top|bottom attribute to calculate the grade of the scroll.

How it works

The affix plugin toggles betwixt 3 classes: .affix, .affix-top, as well as .affix-bottom. Each cast represents a item state. You must add together CSS properties to grip the actual positions, amongst the exception of position:fixed on the .affix class.
  • The plugin adds the .affix-top or .affix-bottom cast to signal the chemical gene is inwards its top-most or bottom-most position. Positioning amongst CSS is non required at this point.

  • Scrolling by the affixed chemical gene triggers the actual affixing - This is where the plugin replaces the .affix-top or .affix-bottom cast amongst the .affix cast (sets position:fixed). At this point, you lot must add together the CSS top or bottom holding to grade the affixed chemical gene inwards the page.

  • If a bottom offset is defined, scrolling by it replaces the .affix cast amongst .affix-bottom. Since offsets are optional, setting ane requires you lot to laid the appropriate CSS. In this case, add together position:absolute when necessary.
In the kickoff instance above, the Affix plugin adds the .affix cast (position:fixed) to the <nav> chemical gene when nosotros convey scrolled 197 pixels from the top. If you lot opened upward the example, you lot volition besides come across that nosotros added the CSS top holding amongst a value of 0 to the .affix class. This is to brand certain that the navbar stays at the pinnacle of the page at all time, when nosotros convey scrolled 197 pixels from the top.

Scrollspy & Affix

Using the Affix plugin together amongst the Scrollspy plugin:

Horizontal Menu (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>

Vertical Menu (Sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

How To Integrate Google Adwords Api Into Codeigniter?

-
Image
One blogger gave me reckon Just add together all the api documents to the third_party folder in addition to ask the library from your controller or library in addition to voilà! Figure: Google Adwords API Hierarchy After many hours of searching, reading in addition to testing I was successful to integrate AdWords API PHP Client Library into Codeigniter 2.X. Step yesteryear footstep conduct on how to integrate Google Adwords API into Codeigniter. Google Adwords API into Codeigniter # Steps Description 1. Download AdWords API PHP Client Library This customer library makes it easier to write PHP applications that programmatically access the AdWords API or DoubleClick Ad Exchange Buyer API. I accept downloaded version 4.5.1( adwords_api_php_4.5.1 ) 2. Extract the compressed archive (.zip or .tar.gz) in addition to glue the src folder within codeigniter's third_party folder. Grab solely src folder fr...
Read more