如何正确处理 Angular 中滚动条的导航栏颜色变化?

2023-11-23

我正在做一个有角度的项目。我想添加一个最初具有透明背景的导航栏,但在滚动时它会改变其颜色。我正在为此使用引导类

我的导航栏标题是 html 代码:

<nav class="navbar navbar-expand-md sticky-top">
    ...
</nav>

在哪里可以添加我的脚本来更改滚动条的颜色


你可以通过以下方式实现这一点@HostListner在你的Typescript file.

import { HostListener } from @angular/core;

@HostListener('window:scroll', ['$event'])

onWindowScroll() {
    let element = document.querySelector('.navbar') as HTMLElement;
    if (window.pageYOffset > element.clientHeight) {
      element.classList.add('navbar-inverse');
    } else {
      element.classList.remove('navbar-inverse');
    }
  }

将滚动事件放在 HTML 部分。

<nav class="navbar navbar-expand-md sticky-top" (scroll)="onWindowScroll();"></nav>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何正确处理 Angular 中滚动条的导航栏颜色变化? 的相关文章

  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • React Native 上的文本缩进

    我需要缩进 React Native 段落的第一行 但使用常见的csstext indent财产 textIndent 与 React Native 不兼容 伪元素选择器也不兼容 例如 first line 有什么方法可以做到这一点而不用将
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • 以嵌套反应形式使用 setControl

    我想知道当我在另一个 formBuilder 组中有一个数组时 我必须做什么才能以反应形式使用 setControl 和 get 例如 this formulario this formBuilder group title this ra
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的
  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https
  • Angular 2 中的变更检测

    我正在将角度 1 和角度 2 集成在一起 因此我有角度 1 控制器和服务以及角度 2 组件 这些对于数据检索和存储来说工作得很好 反之亦然 下面是我的 html 页面 h3 Angular 1 service h3 div div
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • angular2 rc5 路由器服务单例

    我最近迁移到 Angular 2 RC 5 并将应用程序中的子模块转换为 NgModule 鉴于以下情况plunker https angular io resources live examples router ts plnkr htm
  • 从 Bootstrap 中删除字形

    如何从 bootstrap 3 中删除所有字形实例 看起来它已经大量嵌入到 css 文件中了 我正在努力使文件大小尽可能最小 只需简单地克隆引导程序https github com twbs bootstrap sass https git
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 打字稿中枚举声明中的方括号的含义是什么?

    我正在浏览一个名为 Angular ngrx 项目的打字稿文件collection ts在那里 我看到声明了以下枚举常量 import Action from ngrx store import Book from models book
  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 在 Angular 6 表单生成器中找不到具有未指定名称属性的控件

    当尝试使用 HTML 文件更新网格表时 我收到此错误消息 在这里 我使用了静态数据来显示表格 并从显示 primeng 表的其他组件导入 并且我添加了一个更新按钮 该按钮具有重定向到另一个页面以更新数据的功能 该问题出现在 HTML 文件的
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • Angular 2获取元素高度

    我这里有一个非常简单的例子 它只是一个带有单个 div 的角度应用程序 是否可以获取div的角度高度 我想我可以用 ViewChild 和 offsetHeight 来做到这一点 import Component ElementRef Vi
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

随机推荐

  • 关于Android中SQLite数据库游标的几个问题

    为了在我的应用程序中实现数据库访问 我遵循拉尔斯 沃格尔教程 但我对一些事情感到非常困惑 每次拨打电话时fetchTodo将创建并返回一个新游标 将前一个光标留给垃圾收集器 所以 如果我不使用startManagingCursor甚至是Cu
  • Android 应用程序中的 API 密钥等敏感全局信息存储在哪里?

    我需要在 Android 应用程序中存储一些敏感信息 如果我将其放入资源文件中 则其他应用程序只需使用以下命令即可浏览和读取该文件似乎是微不足道的PackageManager getResourcesForApplication 放置此类信
  • sqlalchemy,用DSN指定数据库名称

    我正在尝试使用以下命令从 Linux 连接到 SQL Serversqlalchemy 这一页显示基于 DSN 的连接 如下所示 engine create engine mssql pyodbc scott tiger some dsn
  • 如何让 PHP 回显 XML 标签?

    我正在开发一个具有大约 3 000 4 000 个动态生成页面的网站 并且我希望更新 XML 站点地图 我过去曾尝试使用在线生成器 但它们似乎从未正确捕获所有页面 所以我打算自己做一些事情 基本上我有类似的东西
  • 如何使用 AutoFac 解析正确的记录器类型?

    我正在更新一个使用 AutoFac 的遗留项目 并且我想将 NLog 与 Simple Logging Facade SLF 结合使用 我过去曾在 Ninject 中使用过它 它的设置非常简单 我只需要执行以下操作 kernel Bind
  • 如何在 JavaScript 中匹配整个单词?

    我试图通过文本框搜索整个单词 假设我搜索 me 我应该找到文本中所有出现的 me 一词 但不能找到 memmm 我正在使用 JavaScriptsearch my regex expression 执行当前搜索 没有成功 经过多次提议使用
  • 没有 chroot 的 LXC

    有没有办法在不创建容器的情况下使用LXC使用进程组进行资源管理 我正在开发一个在沙箱内运行任意代码的服务 我只对硬件资源管理感兴趣 我不想进行任何 chrooting 我只希望这些进程组能够访问主文件系统 有人告诉我 lxc 是轻量级的 但
  • arm-none-eabi-ld:找不到-lc

    我正在尝试为基于 XMC1100 的开发板编写代码 我正在尝试这个教程 http eleceng dit ie frank arm BareMetalXMC2Go index html 我已经下载了blinky tar gz 文件并解压 当
  • 使用 ssl 公钥/私钥基于 Web 登录?

    是否可以通过网络浏览器创建需要公钥 私钥的登录过程 公钥将存储在服务器上 私钥将由用户保存 并加密 我基本上想做一些类似于 SSH 的事情 但是通过网络 也许是 HTTP 身份验证的自定义方法 摘要 除外 我知道使用普通浏览器可能无法做到这
  • 使用数据库表中的值生成下拉列表输入

    我正在尝试使用 Laravel 生成一个包含 MySQL 表中的值的下拉列表 表格很简单 两列 id and category 以下将检索所有记录 类别 但返回一个对象而不是数组 这是我需要的下拉代码 categories Category
  • 如何在Python中制作n维嵌套for循环? [复制]

    这个问题在这里已经有答案了 我有以下情况 for x1 in range x1 x2 for x2 in range x3 x4 for x3 f x1 x2 x3 如何将其转换为我只告诉 python 的机制n变量名称为 x1 x2 x3
  • 检测这是 iframe 加载还是直接加载

    我希望仅在 iframe 内的页面上拉出表单时才显示该表单 我怎么做 有服务器端解决方案吗 如果您使用 JQuery 安装说明如下 http jquery com document ready function if window wind
  • 指针和引用作为 const 对象的成员变量

    以下代码编译良好 不过我想知道它是否是合法的C 更具体地说 如果我有一个 const 对象 我是否可以通过该对象的指针 引用修改变量 class Foo public int a int b Foo int a int b a a b b
  • 关于Python日志记录中的NOTSET

    As the logger setLevel医生说 创建记录器时 级别设置为 NOTSET 这会导致当记录器是根记录器时处理所有消息 或者当记录器是非根记录器时将委托给父记录器 请注意 根记录器是使用 警告 级别创建的 所以我想如果我创建一
  • Angular:为什么 CSS 对齐不能与 ng-repeat 一起使用?

    我正在尝试做什么 我正在尝试均匀分布li in a ul 证明合法 当我硬编码时 CSS 可以工作li 但是当我使用ng repeat 不再应用CSS HTML div div ul class two column li li li li
  • Postgres 在全局范围内设置自动提交关闭

    如何在 psql 8 4 中全局级别设置自动提交 是否有一个我可以更改的配置属性 它将为集群上的所有数据库引入此行为 以在关闭自动提交的情况下启动数据库会话 只需添加以下内容即可 psqlrc set AUTOCOMMIT off 请注意
  • Dockerfile CMD“未找到命令”

    我有以下内容Dockerfile FROM nodesource node jessie ADD SOMEPATH RUN cd SOMEPATH npm install WORKDIR SOMEPATH CMD bash npm run
  • O(1) 和 θ(1) 有什么区别?

    我知道它们的定义 但是为什么我有时在教科书上看到O 1 有时看到 1 Thanks 如果您谈论的是实数函数 则 O 1 和 1 不一定相同 例如 考虑函数 f n 1 n 该函数的复杂度为 O 1 因为对于任何 n 1 f n 1 然而 它
  • NetworkStream 和 TcpClient 有多少缓冲区?

    我们正在编写一个TCP服务器和客户端程序 TcpClient 缓冲区有多少空间 比如 它什么时候会开始丢弃数据 我们正在尝试确定 TcpClient 是否可以阻塞 或者是否应该进入它自己的后台线程 以便缓冲区不会变满 您可以从以下位置获取缓
  • 如何正确处理 Angular 中滚动条的导航栏颜色变化?

    我正在做一个有角度的项目 我想添加一个最初具有透明背景的导航栏 但在滚动时它会改变其颜色 我正在为此使用引导类 我的导航栏标题是 html 代码