ScrollSpy Effect on DIV Only

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.

标签： twitter-bootstrap scrollspy

1条回答

对你真心纯属浪费

2楼-- · 2019-07-18 20:47

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

0人赞添加讨论(0) 举报

ScrollSpy Effect on DIV Only

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间