代码之家 › 专栏 › 技术社区 › Bojan Kolano

滚动点的侧导航

sass html jquery javascript

Bojan Kolano · 技术社区 · 7 年前

for (var i=0; i < aArray.length; i++) {
    var theID = aArray[i];
    console.log(theID);

    if (panel.hasClass('current')) {
      $("a[href='#" + theID + "']").addClass('greens');

  } else {
      $("a[href='#" + theID + "']").removeClass('greens');

  }

但我不确定。它们都是绿色的,而不是只有一个点的颜色。

你会在页面顶部看到点,但由于我有一个内部数据库,我不能在这里发布所有内容。应该是这样的:

我已经做了一切,包括它是固定的。这就是现在的样子。

每个圆圈都是绿色的。这让我发疯了。

4 回复 | 直到 7 年前

Mojo Allmighty 7 年前

问题是选择节。你现在要做的就是具有类的元素 panel current . 有 if (panel.hasClass('current')) 将始终返回true,因为始终存在具有类的元素谁有那门课所有的点都是绿色的。您需要一个新的选择器来匹配您的 a 与您的部门。

<a section-id="hero" href="#hero" class="dot"><span class="hide">dot</span></a>
<a section-id="whole" href="#whole" class="dot"><span class="hide">dot</span></a>
<a section-id="split" href="#split" class="dot"><span class="hide">dot</span></a>
<a section-id="two-split" href="#two-split" class="dot"><span class="hide">dot</span></a>
<a section-id="three-split" href="#three-split" class="dot"><span class="hide">dot</span></a>
<a section-id="footer" href="#footer" class="dot"><span class="hide">dot</span></a>

至于javascript代码,您需要使用 section-id 属性,并检查节中的关联ID是否具有类 现在的

var aChildren = $('.side ul').children();
var aArray = [];
for (var i=0; i < aChildren.length; i++) {
   var aChild = aChildren[i];
   var ahref = $(aChild).attr('section-id');
   aArray.push(ahref);
}

for (var i=0; i < aArray.length; i++) {
   var theID = aArray[i];

   if($('#'+theID).hasClass('current')) {
      $("a[href='#" + theID + "']").addClass('greens');
   } else {
      $("a[href='#" + theID + "']").removeClass('greens');
   }
}

Dilip Belgumpi 7 年前

我不知道你的html看起来怎么样,在这里我给出了示例代码,因为它和你想要的一样工作。

在卷轴上也添加了

$("ul li a").click(function(){
   $current=$(this);
  $("ul li").each(function(){
    $(this).removeClass("current");
  })
   $current.parent().addClass("current");
});


 var one_pos=$('#one').offset().top;
 var two_pos=$('#two').offset().top;
 var three_pos=$('#three').offset().top;
 var four_pos=$('#four').offset().top;
 var five_pos=$('#five').offset().top;
 
 $(window).on('scroll', function() {
  
    var current_pos = window.pageYOffset;
    if(current_pos>one_pos && current_pos<two_pos){
        $("ul li a[href='#one']").click();
    }else if(current_pos>two_pos && current_pos<three_pos){
        $("ul li a[href='#two']").click();
    }else if(current_pos>three_pos && current_pos<four_pos){
        $("ul li a[href='#three']").click();
    }else if(current_pos>four_pos && current_pos<five_pos){
        $("ul li a[href='#four']").click();
    }else if(current_pos>four_pos){
        $("ul li a[href='#five']").click();
    }
 
 })

div{
height:200px;
padding:2%;
border:1px solid;
}
ul{
position:fixed;
list-style:none;
}
ul li.current i{
   color:green;
}
ul li i{
   color:#ddd;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul>
<li class="current"><a href="#one"><i class="fa fa-circle"></i></a></li>
<li><a href="#two"><i class="fa fa-circle"></i></a></li>
<li><a href="#three"><i class="fa fa-circle"></i></a></li>
<li><a href="#four"><i class="fa fa-circle"></i></a></li>
<li><a href="#five"><i class="fa fa-circle"></i></a></li> 
</ul>

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>
<div id="five">five</div>


<div>rest</div>

Bojan Kolano 7 年前

$(window).scroll(function(){

  var cutoff = $(window).scrollTop();

  panel.each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
      panel.removeClass('current');
      $(this).addClass('current');
      return false;
    }
  })

  var aChildren = $('.side ul').children();
  var aArray = [];
  for (var i=0; i < aChildren.length; i++) {
    var aChild = aChildren[i];
    var ahref = $(aChild).attr('section-id');
    aArray.push(ahref);
  }

  for (var i=0; i < aArray.length; i++) {
    var theID = aArray[i];

    if($('#'+theID).hasClass('current')) {

      $("a[href='#" + theID + "']").addClass('greens');

  } else {
      $("a[href='#" + theID + "']").removeClass('greens');

  }
}

感谢@Mojo Allwighty

sajoku 7 年前

这样做的目的是“循环所有a元素,如果面板的类为“current”,则为其着色”。如果面板具有“当前”类颜色,则所有a元素均为绿色你想要什么: 如果面板具有类当前查找,则对应的a元素(属于面板)和addClass为绿色。

如果不深入了解代码的其余部分,您应该/可以做以下两件事情中的一件;

循环遍历面板,并将类“Greens”添加到相应的a元素中。
循环遍历a元素(正如您现在所做的),并检查相应的面板元素(属于a元素的面板元素)。

$panel.find("a").addClass('greens');

----编辑---

在面板上,您可以添加数据属性,其名称对应于要使其变为绿色/活动的a元素。当激活面板时,还可以选择与面板对应的单个a元素(因此,带有数据的面板对应link=“hero”指带有数据id=“hero”的a元素),只需将绿色类添加到面板中即可。您可以选择首先选择所有a元素并删除绿色类,或者选择具有绿色类的单个a元素并删除该单个a元素。

<panel class="hero current" data-corresponding-link="hero"></panel>
<panel class="other-panel" data-corresponding-link="other-panel"></panel>
<a data-id="hero" href="#hero" class="dot"><span class="show">dot</span></a>
<a data-id="other-panel" href="#three-split" class="dot"><span class="hide">dot</span></a>

$(window).scroll(function(){

  var cutoff = $(window).scrollTop();

  panel.each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
      panel.removeClass('current');
      $(this).addClass('current');

      $(".green").removeClass("green") //Select all the green classes and remove the class green (you could scope this further down to a.green or something).
      $("data-id='"+panel.dataset.correspondingLink+"']").addClass("green") //based on the panels corresponding-link data-attribute select the element(s) that have this data-attribute data-id set to "hero" and addClass green
      return false;
    }
  })
}