Bs Scrollspy

-

Bootstrap Scrollspy Plugin (Advanced)

The Scrollspy Plugin

The Scrollspy plugin is used to automatically update links inwards a navigation listing based on scroll position.

How To Create a Scrollspy

The next instance shows how to practise a scrollspy:

Example

<!-- The scrollable surface area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to boundary to a department inwards the scrollable surface area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- Section i -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page together with expect at the navigation bar spell scrolling!</p>
</div>
...

</body>

Example Explained

Add data-spy="scroll" to the chemical constituent that should hold upwardly used equally the scrollable surface area (often this is the <body> element).
Then add together the data-target attribute alongside a value of the id or the aeroplane refer of the navigation bar (.navbar). This is to brand certain that the navbar is connected alongside the scrollable area.
Note that scrollable elements must gibe the ID of the links within the navbar's listing items (<div id="section1"> matches <a href="#section1">).
The optional data-offset attribute specifies the reveal of pixels to outset from altitude when calculating the rate of scroll. This is useful when you lot experience that the links within the navbar changes the active state equally good before long or equally good early on when jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The chemical constituent alongside data-spy="scroll" requires the CSS position property, alongside a value of "relative" to run properly.

Scrollspy Vertical Menu

In this example, nosotros role Bootstrap's vertical navigation pills equally menu:

Example

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

  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#section1">Section 1</a></li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page together with expect at the navigation listing spell scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</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

How To Provide View’S Every Mo Information Inwards Codeigniter?

-
View’s tin dismiss travel returned every minute information amongst a tertiary parameter ( setting to TRUE) every minute follows $output = $this->load->view('view', $data, TRUE); You tin dismiss usage this selection for many purposes. I accept used it for constructing downloads too to choose handgrip of too impress consummate html template. You tin dismiss used it to build PDFs amongst the assistance of about custom libraries or function. Sumber http://developer-paradize.blogspot.com
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