DIVのみのScrollSpyエフェクト

私はスクロールスパイのために同じ効果を達成しようとしていますが、navアイテムの代わりに、サイドバイサイドdivを表示したいだけです。左側には、私のdivは長い形式のフォームになり、右側にはdivの情報がまとめられます。DIVのみのScrollSpyエフェクト

私が達成したいものを示していjsbin：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>

リンク。

出典

2017-01-27 Angelo

は「Scrollspyは現在、適切なブートストラップのナビゲーションコンポーネントを使用する必要がhttp://jsbin.com/kojajesipo/edit?html,css,outputアクティブリンクの強調表示」 – makshh

scrollpyには、< a href = "＃anchor">というロールを持つ「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

出典

2017-01-28 09:00:59

DIVのみのScrollSpyエフェクト

答えて

関連する問題