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

Removing The Index.Php File From Url Inward Codeigniter

-
By default, the index.php file volition survive included inwards your URLs: example.com/index.php/news/article/my_article You tin easily take away this file yesteryear using a .htaccess file amongst simply about uncomplicated rules. RewriteEngine on RewriteCond $1 !^(index\.php|images|robots\.txt) RewriteRule ^(.*)$ index.php?/$1 [L] This htaccess dominion is footling dissimilar than dominion y'all tin honor inwards Codeigniter's ain website. When I used the codeigniters htaccess rule, it didn't worked. After searching the solution I works life inwards a higher house solution. It worked. :) Sumber http://developer-paradize.blogspot.com
Read more

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

Delete Daily Doppler E-Mail Spam From An Iphone [Fix]

-
Image
Many iPhone users including iPhone 7/8 too iPhone X users on iOS11 are facing an lawsuit that they are receiving multiple emails from something called Daily Doppler. You tin uncovering the Daily Doppler inwards your setting but won’t hold upwardly able to take away Daily Doppler from iPhone. The Daily Doppler is non visible inwards app listing then precisely can’t merely delete every bit a normal app. image:dailydoppler.com The e-mail received yesteryear users is coming from many dissimilar addresses too precisely i e-mail is sent from many advertisements. Kohls, Sears,   lawn to a greater extent than services, car advertisements etc. . They e-mail volition decease on on coming from these sources too non agency to terminal them every bit there’s no furnish address. If yous search inwards your iPhone Daily Doppler is visible every bit an Account too all of the Daily Doppler spam goes into this account. You tin banking concern jibe your listing of concern human relationshi
Read more