There is a simple markup in the form of menus, divs, which menu items refer to and a small stick, which should move under the menu, depending on which content block the user is on.

There is also a js-code that makes the desired menu item active when scrolling and when pressed, and also makes the header fixed at a specific scroll from top'a

$(window).on('scroll', (function() { if ($(this).scrollTop() > 299) { $('.navigation').addClass("navigation-fixed"); $('#block1').css("margin-top", "50px"); $('.navigation-pos').addClass("navigation-pos-animate"); $('.fa-home').addClass('fa-home-visible'); $('.nav-button-selected').addClass('nav-button-selected-visible'); $('.inner-navigation-pos').addClass('inner-navigation-pos-animate'); } else { $('.navigation').removeClass("navigation-fixed"); $('#block1').css("margin-top", "0px"); $('.navigation-pos').removeClass("navigation-pos-animate"); $('.fa-home').removeClass('fa-home-visible'); $('.nav-button-selected').removeClass('nav-button-selected-visible'); $('.inner-navigation-pos').removeClass('inner-navigation-pos-animate'); } })); $(document).on("scroll", onScroll); $('.navigation-pos').on('click', 'a', function(e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function() { $(this).removeClass('active'); }); $(this).addClass('active'); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top - 50 }, 800, function() { window.location.hash = target; $(document).on("scroll", onScroll); }); }); function onScroll() { var scrollPos = $(document).scrollTop(); $('.inner-nav a').each(function() { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top - 50 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('.inner-nav a').removeClass("active"); currLink.addClass("active"); } else { currLink.removeClass("active"); } }); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner-navigation-pos"> <ul class="inner-nav"> <li class="nav-button"><a href="#block1">About me</a></li> <li class="nav-button"><a href="#block2">My works</a></li> <li class="nav-button"><a href="#block3">Blog</a></li> <li class="nav-button"><a href="#block4">Contacts</a></li> </ul> <div class="nav-button-selected"></div> </div> <div id="block1"></div> <div id="block2"></div> <div id="block3"></div> <div id="block4"></div>

The task is to make the stick move under the menu, depending on which block of content I am on. That is, I am starting from the first block, scrolling, and as soon as I go over the second block, the wand moves under the second menu item. If something is not clear, then you can look at the whole matter in more detail here .

    1 answer 1

    Here you have determined which element is active and assigned a class to it:

     currLink.addClass("active");

    Next, determine its position using .position()

     var left=currLink.position().left;

    then width with .width()

     var width=currLink.width();

    And give these coordinates to your strip. (It must be position:absolute , and the menu itself is position:relative ). You specify an animation using animate() :

     $( "#id_полосочки" ).animate({ width: width+'px', left: left+'px' },300);

    animate() should be called only when changing the active block, otherwise the animation will be lost when scrolling continuously. Create a global (!) Variable that will contain the last active block:

      var lastactive;

    and call animate only when changing the actin block.

      if(lastactive!=currLink.attr('href')){ lastactive=currLink.attr('href'); $( "#id_полосочки" ).animate( ..... ); }
    • it seems to work out, but it works correctly only when you go to the blocks by reference, and if you just scroll, it works, but it's strange. (animate doesn’t work at speed, there are still jambs, but I don’t know how to describe them in words - look at the link above pzh) - g3rmesov
    • @ g3rmesov And everything is clear, when you scroll, the animate constantly called and does not allow animation to occur normally. Now I will add in reply - Crantisz
    • voo, thanks a lot, everything earned) it is possible still a question on? between the block my works and blog as if there is some empty space when the class active does not work, between blog and contacts too. I broke my head, I don’t understand what it is, don’t tell me?) (you can see it on a slow scroll or just follow the blog or contacts link) - g3rmesov