Question

在用户滚动显示后，是否有一种简单的方法可以突出显示顶部 ID（使用特定颜色f.e.的css-class）？我在页面上有一个卷轴，但似乎插件不会帮助我，所以我无法达到目的。

P.S。我在Google或StackOverflow中找不到相似的信息，所以请不要误会我的意思。

页面有一个粗略的例子

number

HTML

var x = new Component1(a, b);
x.age = "a"; // IDE/editor shows you have a problem here.

CSS

https://jsfiddle.net/masyurik/kdnzdeb2/#&togetherjs=DeaMiBADpp

Answer 1

您可以使用jquery-waypoints来了解视口顶部已到达的元素。该插件将为您提供回调，它将帮助您更改活动元素的CSS。

Answer 2

您需要使用scrollevent并相应更改类...请检查https://jsfiddle.net/77v3329y/1/

<强>的jQuery

$(document).ready(function() {
  var a = +$('#secA').height();
  var b = $('#secB').height();
  var c = $('#secC').height();
  console.log(a);
  console.log(b);
  console.log(c);
  $(window).on('scroll', function() {
    $('#secA, #secB, #secC').removeClass('active');
    var st = $(document).scrollTop();
    if (st < a) {
      $('#secA').addClass('active');
    }
    if (st > a) {
      $('#secB').addClass('active');
    }
    if (st > a + b) {
      $('#secC').addClass('active');
    }
  })
});

Answer 3

以下是检测滚动到顶部事件的解决方案。 Fire event when div is visible to visitor with jQuery?

滚动到顶部时，只需使用jQuery更改元素的css：$（“＃secA”）。css（“background-color”，“yellow”）;

滚动后突出显示活动div

3 个答案: