Quick Bootstrap ScrollSpy Demo

Developer
Jeff Wainwright
Size
3,090 Kb
Views
10,120
  1. Quick Bootstrap ScrollSpy Demo Previews
  2. Quick Bootstrap ScrollSpy Demo HTML Codes
  3. Quick Bootstrap ScrollSpy Demo CSS Codes

How do I make an quick bootstrap scrollspy demo?

By setting the vertical height of each section when using bootstrap scrollspy each item in the nav will highlight. . What is a quick bootstrap scrollspy demo? How do you make a quick bootstrap scrollspy demo? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Quick Bootstrap ScrollSpy Demo Previews
IQ Test

Quick Bootstrap ScrollSpy Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quick Bootstrap ScrollSpy Demo</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Share+Tech&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<body data-spy="scroll" data-target="#side-nav">
<div class="container"> <div class="row"> <div id="side-nav"> <ul class="nav nav-list affix"> <li><a href="#start">*Scroll Spy<br><sub>vertical height</sub></a></li> <li><a href="#one">N&deg;1</a></li> <li><a href="#two">N&deg;2</a></li> <li><a href="#three">N&deg;3</a></li> </ul> </div> <div class="col-md-offset-3 col-md-9 content"> <div id="start" class="h1-wrap"> <h1 class="shareTech opacity">Scroll Spy Vertical Height Demo</h1> <div class="puppyWrap"><div class="puppyCover opacity"></div> <img class="topImage" src="http://www.drawing-factory.com/image-files/how-to-draw-a-puppy-labrador11.jpg" /> </div> </div> <section id="one"> <h2 class="shareTech">Section 1</h2> <p> Scroll spy is very fun but pretty tricky when it's activated by id's with elements of varying heights. </p> </section> <section id="two"> <h2 class="shareTech">Section 2</h2> <p> <strong>Note:</strong> If the nav list is of a certain height and is the trigger element well - you could run into problems when consider spy activation. </p> </section> <section id="three"> <h2 class="shareTech">Section 3</h2> <p> If you're rendering trigger id elements dynamically it's best to make sure that you're setting the height of the element as well; particularly if the element height is small. </p> </section> <sub>Disclaimer: this is mainly an issue for desktop viewing so this example will not depercate nicely. You're welcome. ;) The background image is from <a href="http://www.drawing-factory.com/">The Drawing Factory</a>.</sub> </div> </div>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
</body>
</html>

Quick Bootstrap ScrollSpy Demo - Script Codes CSS Codes

body, body a { background:#FAF7FA; color: #A76AD9;
}
body .nav-list>.active>a{ background-color:#DDBFF5;
}
body .nav-list>.active>a:hover { background:#A146C2;
}
body .nav a:hover{ color:#DDBFF5; background-color: #F7EDFA;
}
#side-nav { position: relative; overflow: hidden;
}
#side-nav:before,
#side-nav:after { content: ' '; display: table;
}
#side-nav:after { clear: both;
}
.shareTech { font-family: 'Share Tech', sans-serif;
}
.nav-list li a { height:80px; font-size:2em; line-height:80px;
}
.opacity, section { opacity:.7;
}
.h1-wrap { padding:1em 1em 5em 2em; background-color: #F7EDFA; margin-bottom:1em;
}
h1:first-of-type { color:#A146C2; font-size:3em; margin-top:1em; margin-left:25%;
}
.topImage { display:inline-block; height:auto; width:40%; margin-left:30%;
}
.puppyCover { background-color: #F5E8FA; position:relative; width:40%; height:332px; margin-bottom:-332px; margin-left:30%;
}
section { background-color: #F2EBF7; height:300px; margin-bottom:1em; padding: 1em 1em .5em 1em;
}
section + section { height:220px /* note the section height here! */
}
section + section + section { height:400px
}
section h2 { font-size:2em; line-height:2.5em;
}
section h2:first-letter { font-size:3em;
}
section p { float:right; font-size:1.5em; line-height:1.6em; width:50%;
}
sub { background:#A76AD9; color:#fff; padding:1em; display:block; float:right; font-size:1em; line-height:1.1em; margin-bottom:2em; margin-right:1em; width:50%;
}
sub a { background:none; color:#fff;
}
sub a:hover { color:#fff; text-decoration:underline;
}
@media only screen and (max-width: 1200px) { #side-nav, .puppyWrap {display:none;} .col-md-offset-3 { margin-left: 0; } .col-md-9 { width: 100%; }
}
Quick Bootstrap ScrollSpy Demo - Script Codes
Quick Bootstrap ScrollSpy Demo - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3.5
Size 3,090 Kb
Views 10,120
Do you need developer help for Quick Bootstrap ScrollSpy Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
Full CSS Ribbon on 1 element
Noframe.js Example
Meeting Schedule Widget with Angular
Trucated.js jQuery Demo
ScrollDir Example
Stickybits Multiple Instances Demo
A Pen by Jeff Wainwright
Shave, a javascript plugin for truncating text
Playing with URLs and ScrollSpy
Reframe.js Example
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!