DIV 전용 ScrollSpy 효과

스크롤 스파이에 대해 동일한 효과를 얻으 려하지만 nav 항목 대신 side div를 표시하고 싶습니다. 왼쪽에서 내 div는 양식의 긴 집합이 될 것이며 오른쪽에는 내 div에 정보 요약이 포함됩니다. jsbin에DIV 전용 ScrollSpy 효과

<!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>

링크 :

는 내가 달성하고자하는 것을 보여 이는 jsbin 있습니다.

출처

2017-01-27 Angelo

는 "Scrollspy 현재 적절한위한 부트 스트랩 탐색 구성 요소의 사용을 필요로 http://jsbin.com/kojajesipo/edit?html,css,output 활성 링크 강조 표시. " – makshh

scrollspy에는 < a href = "# anchor">가있는 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

출처

2017-01-28 09:00:59

답변

관련 문제