I am trying to achieve the same effect for a scroll spy but instead of a nav item, I only want to display a side by side div. On the left hand side, my div will be a long set of form, and on the right hand side, my div will contain summary of info.
I have a jsbin which illustrates what I want to achieve:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="col-md-8">
<p>Some text Here</p>
<hr />
<p>Another Line</p>
<hr />
<p>Another Set</p>
<hr />
<p>More</p>
<hr />
<p>Just for display</p>
<hr />
<p>So that I could scroll</p>
<hr />
<p>Scroll Spy</p>
<hr />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 well" id="myScrollspy">
<p>Scroll with DIV on left</p>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Link to the jsbin.
scrollspy needs a role="tablist" with < a href="#anchor" > inside.
You can make your summary like this:
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
position: relative;
}
#myScrollspy {
position: fixed;
top:0;
right: 0;
}
.active { background-color: #ccc}
.summary {display: none;}
.active .summary {display:block;}
</style>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="40">
<div class="container">
<div class="col-md-8">
<p>Some text Here</p>
<hr />
<p>Another Line</p>
<hr />
<p>Another Set</p>
<hr />
<p>More</p>
<hr />
<p>Just for display</p>
<hr />
<p>So that I could scroll</p>
<hr />
<p>Scroll Spy</p>
<hr />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<label for="pwd">More Info:</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="pwd">Date:</label>
<input type="date" class="form-control">
</div>
</form>
</div>
<div class="col-md-4" id="myScrollspy">
<h3>Summary</h3>
<ul class="nav" role="tablist">
<li>
<a href="#email">Email</a>
<div class="summary">
my email summary
</div>
</li>
<li>
<a href="#pwd">Password</a>
<div class="summary">
my password summary
</div>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
CSS
body {
position: relative;
}
#myScrollspy {
position: fixed;
top:0;
right: 0;
}
.active { background-color: #ccc}
.summary {display: none;}
.active .summary {display:block;}
jsbin http://jsbin.com/kojajesipo/edit?html,css,output
