Question

我知道有一些与制作透明导航栏相关的主题，但答案并不像我预期的那样。

我想制作一个功能与此网站类似的导航栏： http://themenectar.com/demo/salient-frostwave/

我的意思是当它位于页面顶部时，它将是透明的。一旦向下滚动，它仍然会粘在顶部，但它现在有一个可见的背景。

那么，如何处理HTML，CSS和JavaScript / jQuery的问题？

提前谢谢你。

Answer 1

我认为使用opacity CSS属性应该这样做。

Answer 2

您可以使用名为headroom.js的插件它非常易于使用和实施。

一旦它不再“卡在”页面顶部，您只需更改导航栏或标题的背景颜色即可。

该插件也很轻巧，并且有香草js，jquery，甚至可以很容易地使用角度。

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>

<article ng-app="AngularAnimationExample">
  
  <nav menu></nav>

  <script id="embedded-menutemplate" type="text/ng-template">

	<nav >
		<a menu-item class="link" ng-repeat="child in parent.children track by $index" ng-bind="child.label"  ng-href="{{ child.url }}"></a>
	
		<h1 id="menuItemCurrent"><span  ng-bind="parent.current.url || 'NoMenuCurrentSelected'"></span></h1>	
		{{ parent.current || json }}
	</nav>
	
  </script>
</article>

Answer 4

要在页面顶部使其透明，它或多或少会像这样：

std::string

使导航栏仅在页面顶部透明，然后在滚动时使用纯文本背景

4 个答案: