Question

我正在尝试创建一个具有固定导航栏的网站。导航栏将具有透明背景。我想使导航栏中的文本颜色根据用户正在查看的网站部分进行更改。

比方说，该网站从加载到白页开始。导航栏中的文本应以黑色开头，以便用户能够阅读文本。

然后，用户滚动到网页的下一部分。假设页面的这一部分是黑色的。导航栏中的文本应为白色，以便用户能够阅读文本。

我该怎么做？我需要使用事件监听器吗？

Answer 1

const routes: Routes = [
  {
    path: "",
    component: DashboardComponent,
    canActivate: [AuthGuardService],
    canActivateChild: [AuthGuardService],
    resolve: {
      preloadScripts: PreloadScriptResolver
    },
    data: {
      preloadScripts: ["echarts"]  // important!
    },
    children: [.....]
}

(function($) {
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 200) {
      $('#stick').addClass('black-text');
    } else {
      $('#stick').removeClass('black-text');
    }
  });
})(jQuery);

body {
  margin: 0;
  padding: 0;
}
#stick {
  position: fixed;
  top: 2px;
  left: 2px;
  color: #fff;
}
#stick.black-text {
  color: #000;
}
#black {
  width:100%;
  height: 200px;
  background-color: #333;
}
#white {
  width:100%;
  height: 800px;
  background-color: #eee;
}

假设每个部分的高度不是动态的，则可以尝试此解决方案，看看这是否是您需要的...

如何检查一个人正在看页面的哪一部分

1 个答案: