如何正确处理 Angular 中 Scroll 上的导航栏颜色变化？

Posted 2023-03-06

【中文标题】如何正确处理 Angular 中 Scroll 上的导航栏颜色变化？

【英文标题】：How to properly handle Navbar color change on Scroll in Angular?

【发布时间】：2020-01-14 05:00:11

【问题描述】：

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

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

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

我在哪里可以添加我的脚本来改变它在滚动上的颜色

【问题讨论】：

Changing nav-bar color after scrolling?的可能重复

这在我的情况下不起作用，因为他们已经修复了导航栏并且我使用的是置顶。此外，我使用 angular 我应该在哪里编写脚本？

【参考方案1】：

您可以在Typescript 文件中使用@HostListner 实现此目的。

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>

【参考方案2】：

定义滚动事件就像定义onscroll 属性一样简单，比如

<nav class="navbar navbar-expand-md sticky-top" onscroll="myScroll()">

让我们实现myScroll。滚动是一个持续的事件，棘手的部分是赶上它的结束。为此我们可以做setInterval:

var scrollInterval = undefined;
var lastScroll = false;
function myScroll() 
    lastScroll = true;
    if (!scrollInterval) 
        //scroll has started, do some coloring
        lastScroll = false;
        scrollInterval = setTimeout(function() 
            if (!lastScroll) 
                //scroll has ended, revert the coloring
                scrollInterval = clearInterval(scrollInterval);
            
            lastScroll = false;
        , 100);
     else 
        lastScroll = true;
    

【参考方案3】：

$(function () 
  $(document).scroll(function () 
	  var $nav = $(".navbar-fixed-top");
	  $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
	);
);

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css";

body 
  padding-top: 70px;
  background: #ddd;


.navbar-fixed-top.scrolled 
  background-color: #fff !important;
  transition: background-color 800ms linear;


.navbar-fixed-top.scrolled .nav-link 
  color:#555;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
	<nav id="navigation" class="navbar navbar-dark bg-primary navbar-fixed-top">		
			<ul class="nav navbar-nav">
				<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
				<li class="nav-item"><a href="#projects" class="nav-link">Teams</a></li>
				<li class="nav-item"><a href="#blog" class="nav-link">Service</a></li>
				<li class="nav-item"><a href="#contact-us" class="nav-link">Contact us</a></li>
			</ul>
	</nav>
</header>



<h1>Folow</h1>

<p>
  "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>

你可以在这里看到：See CodeExample