html - 滚动时更改颜色的粘性标题 - WordPress

Question

如何设置没有背景色的导航栏？

例如。如果页面滚动到#work，颜色应该不同。如果页面滚动到#testi，颜色应该不同。

我已经尝试了将近十几个教程，但我无法使用 WordPress 实现它。

网址:http://www.clickableco.com/demo1/

任何帮助将不胜感激!

Answer 1

我认为您可以使用以下代码管理此功能。

var top1 = $('#home').offset().top;
var top2 = $('#featuredWork').offset().top;
var top3 = $('#caseStudy').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#change').css('background-color', '#f00');
  } else if (scrollPos >= top2 && scrollPos < top3) {
    $('#change').css('background-color', '#0f0');
  } else if (scrollPos >= top3) {
    $('#change').css('background-color', '#00f');
  }
});

您必须根据您的内容部分找到位置。

根据部分滚动应用标题背景颜色。

希望这会有所帮助。