ScrollSpy-Effekt auf DIV Nur

Ich versuche, den gleichen Effekt für einen Scroll-Spion zu erreichen, aber anstelle eines Nav-Elements, möchte ich nur eine Seite div Seite anzeigen. Auf der linken Seite wird mein Div eine lange Form sein, und auf der rechten Seite wird mein Div eine Zusammenfassung von Informationen enthalten.ScrollSpy-Effekt auf DIV Nur

Ich habe einen jsbin die zeigt, was ich erreichen möchte:

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

Quelle

2017-01-27 Angelo

„Scrollspy derzeit die für die ordnungsgemäße Verwendung eines Bootstrap nav Komponente erfordert Hervorhebung von aktiven Links. " – makshh

scrollspy benötigt eine role = "tablist" mit < a href = "# anchor"> innen. Sie können Ihre Zusammenfassung wie folgt machen:

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

Quelle

2017-01-28 09:00:59

ScrollSpy-Effekt auf DIV Nur

Antwort

Verwandte Themen