ScrollSpy对DIV的影响 [英] ScrollSpy Effect on DIV Only
本文介绍了ScrollSpy对DIV的影响的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现与滚动间谍相同的效果，但我只想并排显示div，而不是导航项目.在左侧，我的div将是一整套表格，在右侧，我的div将包含信息摘要.
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.
我有一个jsbin，它说明了我想要实现的目标:
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>
链接到
推荐答案
scrollspy需要带有<内部的href =#anchor">. 您可以像这样进行摘要:
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，输出
这篇关于ScrollSpy对DIV的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
