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

标签 javascript jquery html css

我正在开发一个网页,需要将其背景颜色从透明更改为黑色,并在达到滚动点后添加 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/

相关文章:

Javascript 函数和可选参数

html - 无论内容如何,​​使两列高度相同

html - 为什么我不能在 CSS 中设置 Textarea 的样式?

javascript - Highchart 日期不适用于某些数据系列

javascript - 对对象类型数组的属性求和并将它们连接为单个对象

jquery - 使用 jQuery 将 HTML 元素移动到底部

c# - 将 IQueryable<int> 转换为 <int>

javascript - 是否可以使用 Jurassic Library 获取 js 变量来分配 C# 字符串

javascript - 将变量列表动态包含到 Jquery 函数中作为参数

javascript - 如何使用 cookie 或本地存储将类添加到子菜单的父级