gpt4 book ai didi

javascript - 更改标题的背景颜色并在特定点后添加 Logo

转载 作者:行者123 更新时间:2023-11-28 05:17:53 25 4
gpt4 key购买 nike

我正在开发一个网页,需要将其背景颜色从透明更改为黑色,并在达到滚动点后添加 Logo 。我是 javascript 新手,对此有一些问题。

示例:http://www.asi.media/

目前我一直在改变颜色,但不知道如何显示图像。
我尝试了多种浏览发现的解决方案,但没有一个有效。

你能帮我一点忙吗?

HTML:

<body>
<img src="pictures/placeholder1.jpg" id="first_image">
<header>
<img src="pictures/logo.png">
<nav>
<ul>
<li><a href="#">PROIZVODI</a></li>
<li><a href="#">O GALERIJI</a></li>
<li><a href="#">O NAMA</a></li>
<li><a href="#">TIM</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>
</nav>
</header>
<main>


</main>

CSS:

header {
width: 100%;
height: 20%;
font-weight: bold;
position: fixed;
font-size: 14px;
z-index: 100;
background-color: transparent;
}

header img {
float: left;
margin-left: 15%;
height: 80%;
margin-top: 5px;
display: none;
}

#first_image {
width: 100%;
min-width: 1024px;
position: fixed;
top: 0;
left: 0;
z-index: -2;
}

Javascript(jQuery):

$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$("#header").css("background-color", "black");
} else {
$("#header").css("background-color", "transparent");
}
});
});

最佳答案

$(window).scroll(function() {
if ($(this).scrollTop() > 600) {
$("header").css("background", "black");
$("header img").css('visibility','visible');
} else {
$("header").css("background", "transparent");
$("header img").css('visibility','hidden');
}
});

https://jsfiddle.net/Thielicious/jykvt19k/

关于javascript - 更改标题的背景颜色并在特定点后添加 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40821327/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com