时间戳

首页 > 解决方案 > 当有人在网页的当前行中时，如何在导航栏中显示/保持悬停效果

html - 当有人在网页的当前行中时，如何在导航栏中显示/保持悬停效果

问题描述

我想做的这个效果和这个网站一样https://preview.uideck.com/items/proton/app.html#screenshots

请注意，当您滚动到 feutures 行时，导航栏中的按钮 Feuture 会保持悬停效果（已激活）。

我认为的第一个想法与锚定有关，但我不知道它如何使用 CSS 属性来做到这一点。

标签： htmlcss

解决方案

我认为仅使用锚点是不可能的。我找到了 jQuery 的解决方案。

HTML 和 CSS：

主要思想是在屏幕中间创建一条不可见/固定的线，以检测这条线何时在一个部分或其他部分内。

<div id="controller"></div>

#controller{
  position: fixed;
  width: 100%;
  top: 50%;
}

查询

在此之后，您必须计算每个部分/特征到 html 标签的距离，就像我们在这里所做的那样：

var dy = $('html').offset().top - $('#content-section-1').offset().top;
var distance_s1 = Math.sqrt(dy * dy);

最后，我们必须添加滚动事件来检查控制器到文档开头（html标签）的距离是否大于某个部分到文档开头（html标签）的距离，以模拟通过添加特定类的悬停效果。

$(window).scroll(function() {
  var dy = $('html').offset().top - $('#controller').offset().top;
  var distance_c = Math.sqrt(dy * dy); 

  if(distance_c >= distance_s3){
    $('#navbar').find('.active').removeClass('active');
        $('#Section3').addClass('active');
    }else if(distance_c >= distance_s2){
    $('#navbar').find('.active').removeClass('active');
    $('#Section2').addClass('active');
  }else if(distance_c >= distance_s1){
    $('#navbar').find('.active').removeClass('active');
    $('#Section1').addClass('active');
  }
});

在这里小提琴： https ://jsfiddle.net/Samuel10F/vuon5h49/123/

如果您找到更有效的方法，请现在告诉我:)

推荐阅读