Javascript 如何设置滚动引导导航栏菜单的菜单不透明度?
我目前正在一个基于引导的网站上工作,我想改变滚动引导导航栏的不透明度。我希望导航栏在500像素的高度完全可见。 到目前为止还不错,我使用在线找到的以下代码更改了滚动不透明度:Javascript 如何设置滚动引导导航栏菜单的菜单不透明度?,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我目前正在一个基于引导的网站上工作,我想改变滚动引导导航栏的不透明度。我希望导航栏在500像素的高度完全可见。 到目前为止还不错,我使用在线找到的以下代码更改了滚动不透明度: $(document).on('scroll', function (e) { $('.navbar').css('opacity', ($(document).scrollTop() / 500)); }); 我的问题是导航栏滚动不透明度在我的网站上工作,但当我在移动视图中打开我的网站时,引导汉堡菜单不工作。
$(document).on('scroll', function (e) {
$('.navbar').css('opacity', ($(document).scrollTop() / 500));
});
我的问题是导航栏滚动不透明度在我的网站上工作,但当我在移动视图中打开我的网站时,引导汉堡菜单不工作。
当我按下汉堡包菜单的按钮时,菜单折叠,超链接可见。唯一的问题是,我没有看到这些链接背后的背景。我试着在CSS中编辑它,但是在那里设置背景不起作用,我想这是因为我实现了scroll opacity脚本
我为我糟糕的英语感到抱歉,但我希望你能理解我的问题:)
编辑:这是我的导航条形码:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsemenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="#home"><img src="img/logo.png" class="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu" style="padding-top:14px;">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#about" style="color:#fff;font-family:KlinicSlabBook;">ABOUT</a>
</li>
<li>
<a href="#work" style="color:#fff;font-family:KlinicSlabBook;">WORK</a>
</li>
<li>
<a href="#team" style="color:#fff;font-family:KlinicSlabBook;">TEAM</a>
</li>
<li>
<a href="#contact" style="color:#fff;font-family:KlinicSlabBook;">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
切换导航
-
-
-
-
@Casper我正在使用导航栏的标准引导媒体查询,我没有在引导CSST中对这些进行任何更改。这与问题相同