Christoffer
(Christoffer Furnes)
August 1, 2016, 8:58am
1
Hi
Any idea on how to make something like the scroll indicator on the right hand side in this page?
Edit: Should perhaps nota that I dont mean the fancy custom animation, just the indicator dots/squares and that they change highlighting when you scroll downwards on the page.
BR
Christoffer
samliew
(webflowexpert.com)
August 1, 2016, 11:22am
2
It would take a bit of computation, like what I have done for this site http://wer1.net
$(document).scroll(function(e) {
var curpos = $(this).scrollTop();
var winheight = $(window).height();
$('.js-anchor-nav a').reverse().each(function() {
var $elem = $(''+$(this).attr('href'));
var elempos = $elem.offset().top;
if(curpos <= elempos) {
$(this).parent().addClass('active')
.siblings().removeClass('active');
}
});
});
$('.js-anchor-nav li').click(function() {
var $elem = $(''+$(this).children('a').attr('href'));
$('html, body').animate({
scrollTop: $elem.offset().top
- $('#header').height()
- ($(document).scrollTop() == 0 ? 93 : 0) // magic. do not touch
}, 800);
});
Christoffer
(Christoffer Furnes)
August 2, 2016, 10:25am
3
Thanks Samliew. Just what I was looking for, will have a try with this!
BR
Christoffer
system
(system)
Closed
October 2, 2016, 7:40am
4
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.