ScrollSpy 仅影响 DIV

Question

我正在尝试为滚动间谍实现相同的效果，但我只想并排显示而不是导航项 div。在左侧，我的 div 将是一长串表格，在右侧，我的 div 将包含信息摘要。

我有一个 jsbin 说明了我想要实现的目标：

<!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 到 jsbin.

Answer 1

scrollspy 需要一个 role="tablist" 里面有。您可以这样总结：

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

ScrollSpy 仅影响 DIV

ScrollSpy Effect on DIV Only

twitter-bootstrap

scrollspy