javascript - active of a Xlink anchor SVG -

i have 4 anchor xlink inside svg , want active event of each, how can call in js?

that looks that:

$(document).ready(function() {  			$('#fullpage').fullpage({  				anchors: ['firstpage', 'secondpage', '3rdpage', '4thpage', 'lastpage'],  				menu: '#timeline',  				scrollingspeed: 1000,  	            onleave: function(index, nextindex, direction){                    $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextindex-1)));                      		}  				});  				});

html {  	image-rendering: optimizequality;  	-webkit-font-smoothing: antialiased;  	-ms-interpolation-mode: nearest-neighbor  }  body {  	height:100%;  	margin:0;  	padding:0;  	overflow:hidden;  	font-family: 'source_sans_prolight';  }    div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,  form,fieldset,input,textarea,p,blockquote,th,td {      padding: 0;      margin: 0;  }  ul, {  	list-style:none;  	text-decoration:none;  }    .intro{  	font-size:20px;    }    /********** menu ************/  #header {  	position: fixed;  	right: -60px;  	top: 0;  	width: 60px;  	height: 100%;  	-webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);  	-moz-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);  	-o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);  	transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);  	-webkit-transition-property: -webkit-transform, right;   	-webkit-backface-visibility: hidden;  	z-index:120;  }    #menu-burger-wrapper {  	position: absolute;  	left:-66px;  	top: 0;  	-webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);  	-moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);  	-o-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);  	transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)  }    /********** essai************/  #menu-burger-wrappr.is-opened {  	-webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1);  	-moz-transition: 1s cubic-bezier(0.77, 0, 0.175, 1);  	-o-transition: 1s cubic-bezier(0.77, 0, 0.175, 1);  	transition: 1s cubic-bezier(0.77, 0, 0.175, 1);  	-webkit-transform: translatex(-276px);  	-moz-transform:translatex(-276px);  	-ms-transform: translatex(-276px);  	-o-transform:translatex(-276px);  	transform:translatex(-276px);  }    #menu-burger-wrappr.is-closed {  	-webkit-transform: translatex(0px);  	-moz-transform:translatex(0px);  	-ms-transform: translatex(0px);  	-o-transform:translatex(0px);  	transform:translatex(0px);  	-webkit-transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);  	-moz-transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);  	-o-transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);  	transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);  }  	/**********essai************/    #menu-burger-wrapper.is-opened .line-burger {  	top: -35px;  }  #menu-burger-wrapper.is-opened .line-1 {  	-webkit-transform: translate(7px, 9px) rotate(45deg);  	-moz-transform: translate(7px, 9px) rotate(45deg);  	-ms-transform: translate(7px, 9px) rotate(45deg);  	-o-transform: translate(7px, 9px) rotate(45deg);  	transform: translate(7px, 9px) rotate(45deg)  }  #menu-burger-wrapper.is-opened .line-2 {  	width: 0px;  	-webkit-transform: translatex(22px);  	-moz-transform: translatex(22px);  	-ms-transform: translatex(22px);  	-o-transform: translatex(22px);  	transform: translatex(22px)  }  #menu-burger-wrapper.is-opened .line-3 {  	-webkit-transform: translate(7px, -9px) rotate(-45deg);  	-moz-transform: translate(7px, -9px) rotate(-45deg);  	-ms-transform: translate(7px, -9px) rotate(-45deg);  	-o-transform: translate(7px, -9px) rotate(-45deg);  	transform: translate(7px, -9px) rotate(-45deg)  }  .line-burger {  	position: relative;  	left: 0;  	top: 0;  	width: 1px;  	height: 35px;  	margin: 0 auto 10px auto;  	background-color: #c8c8c8;  	-webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);  	-moz-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);  	-o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);  	transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)  }  #menu-burger {  	width: 44px;  	background:#2c75ff;  	height: 32px;  	padding-top: 12px;  	cursor: pointer;  }    #menu-burger.is-opened{  	z-index:999;  }  #menu-burger .line {  	width: 30px;  	height: 2px;  	margin-bottom: 7px;  	background-color: #fff;  	-webkit-transform: translatex(7px);  	-moz-transform: translatex(7px);  	-ms-transform: translatex(7px);  	-o-transform: translatex(7px);  	transform: translatex(7px);  	-webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);  	-moz-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);  	-o-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);  	transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)  }  #menu-burger:hover .line-1 {  	width: 20px;  	-webkit-transform: translatex(12px);  	-moz-transform: translatex(12px);  	-ms-transform: translatex(12px);  	-o-transform: translatex(12px);  	transform: translatex(12px)  }  #menu-burger:hover .line-2 {  	width: 10px;  	-webkit-transform: translatex(27px);  	-moz-transform: translatex(27px);  	-ms-transform: translatex(27px);  	-o-transform: translatex(27px);  	transform: translatex(27px)  }  #menu-burger:hover .line-3 {  	width: 15px;  	-webkit-transform: translatex(7px);  	-moz-transform: translatex(7px);  	-ms-transform: translatex(7px);  	-o-transform: translatex(7px);  	transform: translatex(7px)  }    .is-opened #menu-burger:hover .line-1 {  	width: 20px;  	-webkit-transform: translate(12px, 9px) rotate(45deg);  	-moz-transform: translate(12px, 9px) rotate(45deg);  	-ms-transform: translate(12px, 9px) rotate(45deg);  	-o-transform: translate(12px, 9px) rotate(45deg);  	transform: translate(12px, 9px) rotate(45deg);  }  .is-opened #menu-burger:hover .line-2 {  	width: 0px;  	-webkit-transform: translatex(22px);  	-moz-transform: translatex(22px);  	-ms-transform: translatex(22px);  	-o-transform: translatex(22px);  	transform: translatex(22px)  }  .is-opened #menu-burger:hover .line-3 {  	width: 20px;  	-webkit-transform: translate(12px, -9px) rotate(-45deg);  	-moz-transform: translate(12px, -9px) rotate(-45deg);  	-ms-transform: translate(12px, -9px) rotate(-45deg);  	-o-transform: translate(12px, -9px) rotate(-45deg);  	transform: translate(12px, -9px) rotate(-45deg);  }      .menu-base{  	background:#2c75ff;  	position: fixed;  	width: 300px;  	height: 100%;  	top: 0;  	z-index:110;  	right: -300px;  }        .menu-base-open {  	right: 0px;  }    /**********push (class sur le body)************/    .push {  	overflow-x: hidden;  	position: relative;  	left: 0;  }    .push-toright {  	left: 240px;  }    .push-toleft {  	left: -240px;  }      .menu-base,  .push {  	-webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);  	-moz-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);  	transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);  }  /**********push (class sur le body)************/  	  .menu-item{  	position:absolute;  	margin-top:200px;  	width:100%;  	height:100%;  	text-align: center;  	font-size:100%;   	overflow:hidden;  }  .menu-item {  	color: rgba(255,255,255,0.5);  	text-transform: uppercase;  	-webkit-transition:color 0.4s ease-in;  }    .menu-item a:hover, #en-cours{  	color: rgba(255,255,255,1);  }    .menu-item li {  	position:relative;  	width:100%;  	margin-bottom:30px;  	margin-left:0px;  	vertical-align:middle;  	overflow:hidden;  	}       /********** timeline ************/  #timeline{  	position:fixed;  	width:500px;  	height:500px;  	top:50%;  	left:50%;  	margin-top:-250px;  	margin-left:-250px;  	pointer-events: all;  	z-index:99;  }    #titre{  	position:fixed;  	width:300px;  	height:100px;  	margin-top:-80px;  	margin-left:-150px;  	top:50%;  	left:50%;  	color:#fff;  	text-align:center;  }    h3 {  	text-transform:uppercase;  	font-size:50px;  }    #greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{  	stroke:rgba(204,204,204,1);  }  #bluecircle{  	stroke-dasharray:1510;  	stroke-dashoffset:1510;  	-webkit-transition:all 1s ease;  	transition:all 1s ease;  }    #smallblueleft, #smallbluebottom, #smallblueright{  	  stroke-dasharray:40;  	stroke-dashoffset:40;  		-webkit-transition:all 1s ease;  	transition:all 1s ease;  }    #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{  	stroke-dashoffset:0;  }   /********** section ************/       .fp-section {      position: relative;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box;  }    .fp-section.fp-table, .fp-slide.fp-table {      display: table;      table-layout:fixed;      width: 100%;  }  .fp-tablecell {      display: table-cell;      vertical-align: middle;      width: 100%;      height: 100%;  }    .fp-scrollable {      overflow: scroll;  }  .fp-notransition {      -webkit-transition: none !important;      transition: none !important;  }    h2{  	font-size: 2em;  }    #don{  	background-image: url(../image/1.jpg);  	background-size:cover;  }    #tri{  }           /********** footer ************/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://raw.githubusercontent.com/alvarotrigo/fullpage.js/master/jquery.fullpage.js"></script>    <!---------- timeline ----------->     <div id="timeline">          			<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">  <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>    <circle id="smallgreytop" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>    <circle id="smallgreyleft" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>    <circle id="smallgreybottom" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>    <circle id="smallgreyright" fill="#ffffff" stroke="#a6a6a6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>    <circle id="bluecircle" fill="none" stroke="#2c75ff" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>    <a data-offset="0" xlink:href="#firstpage"><circle id="smallbluetop" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>    <a data-offset="1132.5" xlink:href="#secondpage"><circle id="smallblueright" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>    <a data-offset="755" xlink:href="#3rdpage"><circle id="smallbluebottom" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>    <a data-offset="377.5" xlink:href="#4thpage"><circle id="smallblueleft" fill="#ffffff" stroke="#2c75ff" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>        </svg>    	</div>        <div id="fullpage">  	<div class="section " id="don">  		<h2></h2>  		<p></p>  	</div>  	<div class="section" id="tri">  	  <h2>fullpage.js</h2>  		<p>create beautiful fullscreen scrolling websites</p>  	</div>  	<div class="section" id="emploi">  			<h2>example</h2>  			<p>html markup example define 4 sections.</p>  	</div>  	<div class="section" id="recycle">  			<h2>working on tablets</h2>  			<p>designed fit different screen</p>  			</div>                            <div class="section" id="vente">  			<h2>working on tablets</h2>  			<p>designed fit different screen</p>  			</div>  </div>

i ended pulling in (nearly) ubiquitous jquery library work across browsers (adding , removing classes on ie counter-intuitive). basic idea declare function check if user has scrolled passed top of section of interest given xlink, , call function on each link every time user scrolls. in code, may like:

var svg = $("#svg"); var main = $("#main"); var links = $("a"); var numlinks = links.length;  function setxlinkactive(xlink, scrolly) {   var section = $(xlink.attr("xlink:href"));   var clienty = section.offset().top;   if (scrolly > clienty) {      xlink.show().addclass("active");   } else {      xlink.removeclass("active").hide();   } } 

now, function needs called each xlink on each scroll event inside main element:

main.bind("scroll", function() {     var scrolly = main.scrolltop() + main.offset().top;     links.each(function(idx, link) {         setxlinkactive($(link), scrolly);     }); }); 

mess around my fiddle see works you.