▼
Streaming live at 10am (PST)

How to make custom scroll indicator on on-page site

#1

Hi

Any idea on how to make something like the scroll indicator on the right hand side in this page?

http://www.navigatingresponsibly.dk/1

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

#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);
});
#3

Thanks Samliew. Just what I was looking for, will have a try with this!

BR
Christoffer

closed #4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.