I've been trying to implement vertical dot navigation on my ReactJS project and i tried to implement this jsfiddle which implements it using jquery.
$(document).ready(function($){
var parPosition = [];
$('.par').each(function() {
parPosition.push($(this).offset().top);
});
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
$('.vNav a').hover(function() {
$(this).find('.label').show();
}, function() {
$(this).find('.label').hide();
});
$(document).scroll(function(){
var position = $(document).scrollTop(),
index;
for (var i=0; i<parPosition.length; i++) {
if (position <= parPosition[i]) {
index = i;
break;
}
}
$('.vNav ul li a').removeClass('active');
$('.vNav ul li a:eq('+index+')').addClass('active');
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
});
It didn't work. It took a while for me to realize that jquery dom manipulation and ReactJS don't really work that well together. I did some searching and i found this stackoverflow question where the answer confirmed this as well.
Has anyone tried doing this before? I couldn't find one anywhere
thanks
