-1

I don't undestand why my code doesn't work properly I created a bullet menu on my page who doesn't working properly. The bullets don't correspond to each sections. For example the last bullet don't correspond to the "Contact" section (last section).

Bullet 1 => Home - "Bullet 1" title
Bullet 2 => "Bullet 2" title
Bullet 3 => "Bullet 3" title
Bullet 4 => "Bullet 4" title

When I scroll the page the bullet doesn't correspond and when I click on a bullet that's the same :-(

PS: I can't use $(window) or $('html, body') instead of $('#page') because of the structure of my page.

http://jsfiddle.net/Xroad/FtaL3/2/

I don't undestand why my code doesn't work properly, any idea ?

$(function(){

    var sections = [];
    var id = false;
    var $navbar = $('.navbar');
    var $navbara = $('a', $navbar);

    $navbara.click(function(e){
        $('#page').animate({
            scrollTop: $($(this).attr('href')).offset().top
        });
    });

    $navbara.each(function(){
        sections.push($($(this).attr('href')));
    });

    $('#page').scroll(function(e){
        var scrollTop = $(this).scrollTop() + ($('#page').height() / 2)
        for(var i in sections){
            var section = sections[i];
            if (scrollTop > section.offset().top) {
                scrolled_id = section.attr('id');
            }
        }
        if (scrolled_id !== id) {
            id = scrolled_id
            $navbara.removeClass('current');
            $('a[href="#' + id + '"]', $navbar).addClass('current');
        }
    });

});
Xroad
  • 415
  • 1
  • 7
  • 24

1 Answers1

1

You are using $(selector).offset().top to determine to which position scrolling should be made, but remember, that is dynamic value, that is bound to window, the closer element is to your window top border currently, the smaller that value will be.

To resolve this, you should take that value in account.

Answer to similar question solves it like this:

var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
    dest = $(document).height() - $(window).height();
}
else {
    dest = $(this.hash).offset().top;
}
$('#page').animate({
    scrollTop: $(dest).offset().top
});

I have made an update to your code http://jsfiddle.net/FtaL3/4/

Just to note, there are more problems with your code and there are more stuff, that is not working in there.

PS: I would rather use Twitter Bootstrap library and would use Scrollspy to work out that menu.

Community
  • 1
  • 1
Deele
  • 3,728
  • 2
  • 33
  • 51
  • Thank you for your help, I'm webdesigner and I think I would stay bad in jQuery :-/ In your update the smooth scroll seems to doesn't work. Scrollspy is independent from Bootstrap ? – Xroad Apr 24 '14 at 17:04
  • @Xroad My code has nothing to do with "smooth scroll". Look at TWBS scrollspy.js at https://github.com/twbs/bootstrap/blob/master/js/scrollspy.js – Deele Apr 24 '14 at 17:14
  • Ok, I will look at scrollspy. Thank you again. – Xroad Apr 24 '14 at 17:16