Make a scrolling effect works with click as well

Question

I have this fixed anchor-link-menu composed that has it's visual changed while scrolling. How can I make this change ALSO by clicking the anchor and not only by scrolling the page? When I avoid scrolling and use directly the anchor-links, the visual doesn't change. Hope you guys can help me.

HTML

CSS

body{background-color: #003333;}

#pointer{
  position: fixed;
  top: 50%;
  left: 50px;
}

#pointer span{
  display: block;
  height: 13px;
  width: 25px;
  border-top-color: #999999;
  border-top-style: solid;
  border-top-width: 1px;
}

JS

$(function() {

  $(window).on('wheel', function(e) {

    var delta = e.originalEvent.deltaY;
    var windowScrollTop = $(this).scrollTop();

    if (delta > 0) {
    //scroll-down
      if(windowScrollTop > 0){
        $(".one").css("border-top-color","#fff").animate({width: '50px'}, 100);
      }
      if(windowScrollTop > 350){
        $(".two").css("border-top-color","#fff").animate({width: '50px'}, 100);
      }
      if(windowScrollTop > 750){
        $(".three").css("border-top-color","#fff").animate({width: '50px'}, 100);
      }
      if(windowScrollTop > 1150){
        $(".four").css("border-top-color","#fff").animate({width: '50px'}, 100);
      }
      if(windowScrollTop > 1500){
        $(".one, .two, .three, .four, .five").css("border-top-color","#999999");
        $(".five").animate({width: '50px'}, 100);
        $("body").css('background-color', '#fff');
      }
    }
    else {
    //scroll-up
      if(windowScrollTop < 350){
        $(".two").css("border-top-color","#999999").animate({width: '25px'}, 100);
      }
      if(windowScrollTop < 750){
        $(".three").css("border-top-color","#999999").animate({width: '25px'}, 100);
      }
      if(windowScrollTop < 1150){
        $(".four").css("border-top-color","#999999").animate({width: '25px'}, 100);
      }
      if(windowScrollTop < 1500){
        $(".one, .two, .three, .four, .five").css("border-top-color","#fff");
        $(".five").animate({width: '25px'}, 100);
        $("body").css('background-color', '#003333');
      }
    }
  });
});

Andrea Scarcella · Accepted Answer

You would like the menu to behave the same way when clicked and when the user scrolls the page.

When you click on a menu item the page should scroll to a given div and the menu should react accordingly.

You can find a possible solution detailed below:

Add a click handler to each menu item (see javascript comment //S1)
Build the target div id using the hash from the clicked menu item (//S2)
Scroll document to top offset of target div (//S3)
Apply menu rendering effects by calling myEffectsClick(e) (//S4 and function definition below.)

HTH

 //IIF to avoid polluting global namespace
 (function() {

   $(function() {
     //S1 - add click handler to each menu item
     $("#pointer > a").each(function(k, v) {
       $(v).click(function(e) {
         //S2 - build target div id using hash from clicked menu item
         var targetId = 'target-' + e.originalEvent.currentTarget.hash.slice(1);
         //S3 - scroll document to top offset of target div
         $('body').scrollTop($('#' + targetId).offset().top);
         //S4 - apply menu rendering effects _without_ taking deltaY into account
         myEffectsClick(e);
       });
     });

     $(window).on('wheel', function(e) {
       myEffectsScroll(e);
     });
   });
   //no deltaY since we're not scrolling
   function myEffectsClick(e) {
       var windowScrollTop = $(this).scrollTop();
       //'reset' menu as if we had scrolled up
       scrollUp(windowScrollTop);
       //add any applicable effects based on current position
       scrollDown(windowScrollTop);
     }
     //apply effects when scrolling

   function myEffectsScroll(e) {
     var delta = e.originalEvent.deltaY;
     var windowScrollTop = $(this).scrollTop();

     if (delta > 0) {
       //scroll-down
       scrollDown(windowScrollTop);
     } else {
       //scroll-up
       scrollUp(windowScrollTop);
     }
   }



   function scrollUp(windowScrollTop) {
     if (windowScrollTop < 350) {
       $(".two").css("border-top-color", "#999999").animate({
         width: '25px'
       }, 100);
     }
     if (windowScrollTop < 750) {
       $(".three").css("border-top-color", "#999999").animate({
         width: '25px'
       }, 100);
     }
     if (windowScrollTop < 1150) {
       $(".four").css("border-top-color", "#999999").animate({
         width: '25px'
       }, 100);
     }
     if (windowScrollTop < 1500) {
       $(".one, .two, .three, .four, .five").css("border-top-color", "#fff");
       $(".five").animate({
         width: '25px'
       }, 100);
       $("body").css('background-color', '#003333');
     }
   }

   function scrollDown(windowScrollTop) {
     if (windowScrollTop > 0) {
       $(".one").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 350) {
       $(".two").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 750) {
       $(".three").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 1150) {
       $(".four").css("border-top-color", "#fff").animate({
         width: '50px'
       }, 100);
     }
     if (windowScrollTop > 1500) {
       $(".one, .two, .three, .four, .five").css("border-top-color", "#999999");
       $(".five").animate({
         width: '50px'
       }, 100);
       $("body").css('background-color', '#fff');
     }
   }


 }());

body {
  background-color: #003333;
}
#pointer {
  position: fixed;
  top: 50%;
  left: 50px;
}
#pointer span {
  display: block;
  height: 13px;
  width: 25px;
  border-top-color: #999999;
  border-top-style: solid;
  border-top-width: 1px;
}
div.scroll-target {
  height: 400px;
}


Test.

  
  
  
  
  


  
    T1
  
  
    T2
  
  
    T3
  
  
    T4
  

So that we can scroll...

Make a scrolling effect works with click as well

Answers (1)

Related Questions