如何正确处理导航栏在角度滚动时的颜色变化？

Question

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

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

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

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

Answer 1

定义一个scroll事件就像定义一个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;
    }
}

Answer 2

$(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;
}

html lang-html prettyprint-override"><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>

Answer 3

您可以在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');
    }
  }

将滚动事件放在超文本标记语言部分。

<nav class="navbar navbar-expand-md sticky-top" (scroll)="onWindowScroll();"></nav>