时间戳

首页 > 解决方案 > 当用户将锚链接滚动到视图中时突出显示它们

html - 当用户将锚链接滚动到视图中时突出显示它们

问题描述

我知道有类似的例子涵盖了我的问题。但我相信我的问题是独一无二的，原因如下：

    <div class="something">
        <div class="somethingelse">
            <div class="">
                <div class="flickity-wrapper">
                    <ul class="list-unstyled flickity-enabled is-draggable" role="tablist" tabindex="0">
                        <div class="flickity-viewport" style="height: 79px; touch-action: none;">
                            <div class="flickity-slider" style="left: 0px; transform: translateX(29.99%);">
                                <li class="carousel-cell is-selected" style="position: absolute; left: 0%;">
                                    <div class="anchor" data-href="#85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>
                                </li>
                                <li class="carousel-cell" style="position: absolute; left: 8.16%;">
                                    <div class="anchor" data-href="#8ba0442a-0621-41e1-8449-3f71e18af8d2">Success</div>
                                </li>
                                <li class="carousel-cell" style="position: absolute; left: 16.67%;">
                                    <div class="anchor" data-href="#61cb9468-60e8-4ac6-a272-4b659fb27400">Contact</div>
                                </li>
                            </div>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>


<div id="85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>

<div id="8ba0442a-0621-41e1-8449-3f71e18af8d2">Success</div>

<div id="61cb9468-60e8-4ac6-a272-4b659fb27400">Contact</div>

我试图将以下代码放在一起，希望突出显示锚导航项，但没有任何效果：

var lastID;
var anchorMenu = $("#anchorNav");
var anchorMenuHeight = anchorMenu.outerHeight+100;
var anchorMenuItems = anchorMenu.find(".anchor");
var anchorMenuItemsTarget = anchorMenuItems.map(function(){
      var item = $($(this).attr("data-href"));
      if (item.length) { return item; }
    });
    
// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+anchorMenuHeight+300;
   
   // Get id of current scroll item
   var cur = anchorMenuItemsTarget.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastID !== id) {
       lastID = id;
       // Set/remove active class
       anchorMenuItems
         .parent().removeClass("active")
         .end().filter("[data-href='"+id+"']").parent().addClass("active");
   }                   
});

我的示例 CSS：

body {
    height: 6000px;
    font-family: Helvetica, Arial;
}

#anchorNav {
    position: fixed;
    z-index: 1;
    background: white;
    left: 0;
    right: 0;
    top: 0;
}

#anchorNav li.active {
    border-top: 3px solid #333;
    color: #333;
}

[id='85eeb28d-3964-443a-8c29-cda37f131f47'] {
  position: absolute;
  top: 500px;
}

[id='8ba0442a-0621-41e1-8449-3f71e18af8d2'] {
  position: absolute;
  top: 800px;
}


[id='61cb9468-60e8-4ac6-a272-4b659fb27400'] {
  position: absolute;
  top: 1200px;
}

演示 JS 小提琴：https ://jsfiddle.net/vyrhnmt1/1/

我正在尝试模拟这个 JS Fiddle 并将其转换为我的用例：http: //jsfiddle.net/mekwall/up4nu/

任何帮助或提示将不胜感激。

标签： htmljquerycss

解决方案

这段代码完成了这项工作：我添加了一些 css 行并修改了一些 js 行

var lastID;
var anchorMenu = $("#anchorNav");
var anchorMenuHeight = anchorMenu.outerHeight()+100;
var anchorMenuItems = anchorMenu.find(".anchor");
var anchorMenuItemsTarget = anchorMenuItems.map(function(){
      var item = $($(this).attr("data-href"));
      if (item.length) { return item; }
    });
    
// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+anchorMenuHeight+300;
   
   // Get id of current scroll item
   var cur = anchorMenuItemsTarget.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastID !== id) {

       lastID = id;
       // Set/remove active class
         anchorMenuItems.removeClass("active")
         anchorMenuItems.filter("[data-href='#"+id+"']").addClass("active");
   }                   
});
body {
    height: 6000px;
    font-family: Helvetica, Arial;
}

#anchorNav {
    position: fixed;
    z-index: 1;
    background: white;
    left: 0;
    right: 0;
    top: 0;
}

.anchor{
    color: #aaa;
}

.anchor.active{
    color: #333;
}


[id='85eeb28d-3964-443a-8c29-cda37f131f47'] {
  position: absolute;
  top: 500px;
}

[id='8ba0442a-0621-41e1-8449-3f71e18af8d2'] {
  position: absolute;
  top: 800px;
}


[id='61cb9468-60e8-4ac6-a272-4b659fb27400'] {
  position: absolute;
  top: 1200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="anchorNav" class="anchornav bg-light">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-4 col-sm-push-8 col-md-push-9 text-right">

      </div>

      <div class="col-md-9 col-sm-8 col-sm-pull-4 col-md-pull-3 col-xs-12">
        <div class="flickity-wrapper">
          <ul class="list-unstyled flickity-enabled is-draggable" role="tablist" tabindex="0">




            <div class="flickity-viewport" style="height: 79px; touch-action: none;">
              <div class="flickity-slider" style="left: 0px; transform: translateX(29.99%);">
                <li class="carousel-cell is-selected" style="position: absolute; left: 0%;">
                  <div class="active anchor" data-href="#85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>
                </li>
                <li class="carousel-cell" style="position: absolute; left: 8.16%;">
                  <div class="anchor" data-href="#8ba0442a-0621-41e1-8449-3f71e18af8d2">Erfolg</div>
                </li>
                <li class="carousel-cell" style="position: absolute; left: 16.67%;">
                  <div class="anchor" data-href="#61cb9468-60e8-4ac6-a272-4b659fb27400">Kontakt</div>
                </li>
              </div>
            </div>

          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>









<div id="85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>

<div id="8ba0442a-0621-41e1-8449-3f71e18af8d2">Erfolg</div>

<div id="61cb9468-60e8-4ac6-a272-4b659fb27400">Kontakt</div>

推荐阅读