JQueryPractice/scollspy.html at main · EduKeyPath/JQueryPractice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<body style="background:#fff; margin:0; padding:0;    ">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


	<style>
	#nav {height:40px;}
	#nav li {float:left; display:inline-block;}
	.active{
  color: red;
  background-color: red;
}
	</style>

	<div id="nav" style="position: fixed; top:0; left:0; width:100%;background:#000;">
		<ul style="margin:0; padding:0; list-style:none;">
			<li class="active"><a href="#red" style="color:#fff;   ">red</a> &nbsp; &nbsp;</li>
			<li><a href="#green" style="color:#fff;   ">green</a> &nbsp; &nbsp;</li>
			<li><a href="#yellow" style="color:#fff;   ">yellow</a> &nbsp; &nbsp;</li>
			<li><a href="#blue" style="color:#fff;   ">blue</a> &nbsp; &nbsp;</li>
			<li><a href="#pink" style="color:#fff;   ">pink</a> &nbsp; &nbsp;</li>
			<li><a href="#black" style="color:#fff;   ">Black</a></li>
			<div style="clear:both; margin:0; padding:0;"></div>
		</ul>
	</div>
	<div id="red" class="scrollspy" style="background:#000; height:100%;  ">
		<div style="background:red; height:100%;   ">red</div>
	</div>
	<div id="green" class="scrollspy" style="background:#000; height:100%;   ">
		<div style="background:green; height:100%;   ">green</div>
	</div>
	<div id="yellow" class="scrollspy" style="background:#000; height:100%;   ">
		<div style="background:yellow; height:100%;   ">yellow</div>
	</div>
	<div id="blue" class="scrollspy" style="background:#000; height:100%;   ">
		<div style="background:blue; height:100%;   ">blue</div>
	</div>
	<div id="pink" class="scrollspy" style="background:#000; height:100%;   ">
		<div style="background:pink; height:100%;   ">pink</div>
	</div>
	<div id="black" class="scrollspy"  style="background:#000; height:100%;   ">
			<div style="background:#000; height:100%;   ">Black</div>
	</div>
	<script>
		$(window).bind('scroll', function() {
		    var currentTop = $(window).scrollTop();
		    var elems = $('.scrollspy');
		    elems.each(function(index){
		      var elemTop 	= $(this).offset().top;
		      var elemBottom 	= elemTop + $(this).height();
		      if(currentTop >= elemTop && currentTop <= elemBottom){
		        var id 		= $(this).attr('id');
		        var navElem = $('a[href="#' + id+ '"]');
		    navElem.parent().addClass('active').siblings().removeClass( 'active' );
		      }
		    })
		});
	</script>
</body>