在这里,我尝试在向下滚动时修改导航栏。我读到这个问题:
滚动后更改导航栏颜色?
向下滚动时导航栏中的转换
引导导航栏将颜色更改为滚动
我不能让它在我的网站上工作,我不明白这个问题:
HTML:
<!-- Navbar -->
<nav class="navbar justify-content-center navbar-expand-sm navbar-dark fixed-top navbar-custom">
<!-- Menu Links -->
<ul class="navbar-nav" >
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<!-- Wanted Logo -->
<a class="navbar-brand" href="#">
<img src="img/logo-light.png" alt="wanted_logo" style="width: 3vw;">
</a>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- End Navbar -->
CSS:
.navbar-custom {
background-color: rgba(0,0,0,0.5);
}
.navbar-custom ul li{
text-transform: uppercase;
font-size: 14px;
color: #fff;
padding-top: 34px;
}
.navbar-custom img{
margin-left: 20px;
margin-right: 7px;
}
.navbar-custom.scrolled {
background-color: red !important;
transition: background-color 200ms linear;
}
JS:
<script>$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-custom");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
根据我的理解,当向下滚动超过导航栏的大小时,它应该会改变颜色。
我认为这可能是一个问题,因为导航栏的高度在这里没有明确定义,所以我尝试添加:
CSS
.navbar-custom{
background-color: rgba(0,0,0,0.5);
height: 100px;
}
它仍然不起作用,所以我也尝试使用这里提出的JS的另一个版本:滚动后更改导航条颜色?
JS:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$(".navbar-custom").css("background-color", "#f8f8f8");
} else {
$(".navbar-custom").css("background-color", "blue");
}
});
});
</script>
同样的结果没有任何改变。
我是新使用JS的,这里什么不起作用?
最后,我使用以下方法实现了它(作为w3返回顶部按钮教程的一部分):
JS:
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var $nav = $(".navbar-custom");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 50) {
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
}
}
</script>
链接到w3school返回顶部按钮:https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
非常感谢。
这是因为你使用了不一致的滚动。你有的
$(window).scroll(function() {...});
不管你怎么检查它
if ($(document).scrollTop() > 100) {...}
你还有:
$(document).ready(function() {...});
将这些都设置为$(窗口)
或$(文档)
,它就会工作。
在我的应用程序中,我需要更改底部导航栏的颜色。我看了很多帖子,但没有找到解决办法。我正在使用appCompat库。 v21/样式。xml
问题内容: 我正在尝试更改导航器栏的颜色,但是我发现只有导航器是根导航器,这才是不可能的。 我正在尝试: 我所有与导航器控制器有关。但是什么都没有改变。实际上,我试图从情节提要中进行相同的操作,但只有在我处于第一个导航器中时,它才有效。 我试图阅读与此问题有关的所有内容,但一无所获 我可以像这样将任何项目添加到导航栏 问题答案: 实际上,我发现该解决方案将用于: 然后在每个视图控制器中,我们需要另
我尝试了很多方法来改变导航栏的颜色,比如 AndroidLollipop更改导航栏颜色 android更改导航栏颜色 如何更改系统导航栏颜色 什么都不管用 我将该项目添加到样式中。xml-使用Android 8.1 任何人都知道在Xamarin做这件事的最佳方式是什么。Android 更新:我在样式文件中尝试了以下代码
我想要一个半透明的状态栏和导航栏,其他颜色不能像蓝色或白色那样半透明 我的代码 活动 状态栏半透明良好,但导航栏颜色不变。为什么? 导航栏
我现在有一段html,它代表我的导航栏的相关部分: 我有一个css,我希望用它来改变导航栏的文本颜色: 唯一的问题是文本颜色保持不变。我还看到一个非常相似的问题没有解决。我打赌谁能解决这个问题,谁就能解决另一个问题。
我需要将导航栏链接更改为白色,并在导航栏上留出空间。我已经为此编写了代码,但我似乎不明白为什么/在哪里它一直被覆盖。导航栏的背景是一个图像,链接似乎变为白色,而图像不在其中,那么有没有办法修复这个问题并将图像保留在背景中? 有人能帮我理解我做错了什么吗?