Question

因此，我希望有一个透明的标题，这样您在滚动时就不会在屏幕上看到随机的灰色物体徘徊，我只希望移动左上方的图像，并且可以使标题略微有点平滑，因为现在有点奇怪

body,
html {
    height: 100%;
    margin: 0;
}

.ag {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(straat.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header {
    padding: 10px 16px;
    background: none;
    color: none;
}

.content {
    padding: 16px;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    padding-top: 102px;
}

.logo
{
    Width: 100px;
    height: auto;
}

<!DOCTYPE html>
<html>

<head>
    <title> Duco's Blog </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<header>

</header>

<body>
    <div class="header" id="myHeader">
    <img class="logo" src="leeuw.png">
    </div>
    <script>
        window.onscroll = function() {
            myFunction()
        };

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
        }

    </script>
    <div class="ag"></div>
    <h1>random bs random bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bs</h1>
</body>

</html>

<header>

</header>

<body>
    <div class="header" id="myHeader">
    <img class="logo" src="leeuw.png">
    </div>
    <script>
        window.onscroll = function() {
            myFunction()
        };

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
        }

    </script>
    <div class="ag"></div>
    <h1>random bs random bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bs</h1>
</body>

</html>

Answer 1

您可以尝试通过更改#header值（例如）来为opacity元素添加过渡。

或者您可以更改top的值：当标题可见-> top: 0，并且标题隐藏时-> top: -100px（示例值，应等于或大于标题高度）。

body,
html {
    height: 100%;
    margin: 0;
}

.ag {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(straat.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header {
    padding: 10px 16px;
    background: none;
    color: none;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

.content {
    padding: 16px;
}

.sticky {
    /*position: fixed;*/ /* just remove it */ 
    opacity: 0;
    width: 100%;
}

.sticky + .content {
    padding-top: 102px;
}

.logo
{
    Width: 100px;
    height: auto;
}

<!DOCTYPE html>
<html>

<head>
    <title> Duco's Blog </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<header>

</header>

<body>
    <div class="header" id="myHeader">
    <img class="logo" src="leeuw.png">
    </div>
    <script>
        window.onscroll = function() {
            myFunction()
        };

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
        }

    </script>
    <div class="ag"></div>
    <h1>random bs random bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bsrandom bs</h1>
</body>

</html>

Answer 2

CSS更改：
您不需要包括<html>选择器，<body>是您的HTML文档的一部分，人们可以看到。

body {
    height: 100%;
    margin: 0;
}

CSS标头被视为<body>（没有.）。我删除了background: none;，因为我觉得您真的想要background-color:transparent;。我还删除了color: none;，因为它指的是字体的颜色，看不到单词（如果有单词）是没有意义的。您的HTML标签<div class="header">引用了#myHeader，如果需要这些样式声明，请将其添加到标题中。

header {
    padding: 10px 16px;
    background-color: transparent;
    (insert #myHeader styles, if needed)
}

我建议将徽标类更改为img.logo，添加2个位置声明将创建您要查找的徽标“粘性”。您需要同时使用这两个功能，以便使用Safari的人们拥有相同的体验。

img.logo {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    Width: 100px;
    height: auto;
}

HTML更改：
您的<header> div需要嵌套在<body>标记内。 <div class=header">无关紧要，可以删除。这样会使您的HTML代码（从</head>到<script>）看起来像这样：

</head>
<body>
  <header>
    <img class="logo" src="leeuw.png" width="" height="" alt="">
  </header>
  <script>

还要注意：shold的内容位于您的<div class="ag">

中

</script>
<div class="ag">
  <h1>random bs ...</h1>
 </div>

好的，这些就是我所看到的东西，它们会阻止您获得所需的效果。我希望我以帮助您学习的方式向他们解释了它们。提供教程的地方很多。

W3C.org是权威，请使用其搜索表单，而
W3Schools是因为它们使操作变得如此简单。 br />肯定会发粘的东西：CSS & HTML

如何使标题透明

2 个答案: