Question

我有这个固定的锚链接菜单，它在滚动时可视化更改。如何通过单击锚点来进行此更改，而不仅仅是通过滚动页面？当我避免滚动并直接使用锚链接时，视觉效果不会改变。希望你们能帮助我。

HTML

<div id="pointer">
  <a href="#first"><span class="one"></span></a>
  <a href="#second"><span class="two"></span></a>
  <a href="#third"><span class="three"></span></a>
  <a href="#fourth"><span class="four"></span></a>
  <a href="#areaTest"><span class="five"></span></a>
</div>

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');
      }
    }
  });
});

Answer 1

您希望菜单在点击时以及当用户滚动页面时的行为方式相同。

单击菜单项时，页面应滚动到给定的div，菜单应相应地做出反应。

您可以在下面找到可能的解决方案：

为每个菜单项添加一个点击处理程序（参见javascript comment // S1）
使用点击的菜单项中的哈希构建目标div id （// S2）
将文档滚动到目标div的顶部偏移量（// S3）
通过调用myEffectsClick（e）应用菜单渲染效果（// S4和下面的函数定义。）

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="height:200px">Test.</div>
<div id="pointer">
  <a href="#first"><span class="one"></span></a>
  <a href="#second"><span class="two"></span></a>
  <a href="#third"><span class="three"></span></a>
  <a href="#fourth"><span class="four"></span></a>
  <a href="#areaTest"><span class="five"></span></a>
</div>
<div>
  <div id="target-first" class="scroll-target">
    T1
  </div>
  <div id="target-second" class="scroll-target">
    T2
  </div>
  <div id="target-third" class="scroll-target">
    T3
  </div>
  <div id="target-fourth" class="scroll-target">
    T4
  </div>
</div>
<div style="height:2000px">So that we can scroll...</div>

滚动效果也适用于点击

1 个答案: