个人中心
gpt4 book ai didi

javascript - 如何使用 JavaScript 制作工作 header ？

转载 作者：太空宇宙 更新时间：2023-11-04 06:41:23 24 4
gpt4 key购买 nike

我正在为一个学校元素编写博客，我的第一段已经完成，所以我认为完成标题会很好，但问题是，我不知道如何完成。

我想要的是一个标题，它可以将标题中所有主题周围的边框更改为您在页面上的位置。就像当您在我的标题中单击开始或“voorstellen”时，边框会出现在该主题上。

如果您点击狮子标志，您是否有可能回到顶部(顶部的 id 是“voorstellen10”)。

body {
    /*geld voor alles */
    height: 100%;
    margin: 0;
    background: black;
}

.centered {
    /* maak tekst in het midden*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header {
    /*balk boven aan gemaakt met w3schools en hulp van forums */
    background-color: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 5px 20px;
    margin-top: 30px;
}

.content {
    /* geen idee stond op w3schools */
    padding: 16px;
}

.sticky {
    /* voor de header*/
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    /* voor de header */
    padding-top: 102px;
}

.logo {
    /* logo linksboven */
    Width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
    float: left;
}

h1.startdereis {
    /* tekst met start de reis */
    color: white;
    text-transform: uppercase;
    font-size: 70px;
    text-align: center;
    margin-top: -80px;
    font-family: sans-serif;
}

.straatfoto {
    /* de straat met een donker filter */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.ibb.co/WppGWkx/straat.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.knop {
    /* start knop */
    margin-top: 30px;
    margin-left: 550px;
}

.knop1 {
    /* start knop*/
    border: 3px solid white;
    padding: 10px 30px;
    color: white;
    text-decoration: none;
    margin-right: 5px;
    font-size: 13px;
    text-transform: uppercase;
    background-color: darkorange;
    font-family: "Roboto", sans-serif;
    margin-left: -300px;
}

.hoofd-nav {
    /* voor de header */
    float: right;
    list-style: none;
    margin-top: 30px;
    padding-right: 100px;
}

.hoofd-nav li {
    /* voor de header */
    display: inline-block;
}

.hoofd-nav li a {
    /* voor de header */
    color: white;
    text-decoration: none;
    padding: 5px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    border: 3px solid transparent;
}

.hoofd-nav li a.actief {
    /* maakt een vierkantje om de actieve onderwerp */
    border: 3px solid white;
}

.hoofd-nav li a:hover {
    /* maakt een blokje als je er overheen gaat */
    border: 3px solid white;
}

.voorstellen {
    max-width: 600px;
    font-size: 20px;
    color: white;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    font-family: sans-serif;
    padding-top: 20px;
}
<!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>
    <div class="header" id="myHeader">
        <img class="logo" src="http://www.pngonly.com/wp-content/uploads/2017/06/Lion-Tattoo-Clipart-PNG-Image-03.png">
        <ul class="hoofd-nav">
            <li><a href="#voorpagina10" class="actief"> Home </a></li>
            <li><a href="#textjump"> Voorstellen </a></li>
            <li><a href=""> Hobby's </a></li>
            <li><a href=""> Toekomstdromen </a></li>
        </ul>
    </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>
</header>

<body>
    <div class="container">
        <div class="straatfoto" id="voorpagina10"></div>
        <div class="centered">
            <h1 class="startdereis">Start De Reis</h1>
            <div class="knop">
                <a href="#textjump" class="knop1"> Start </a>
            </div>
        </div>
    </div>
    <div class="voorstellen" id="textjump">
        <h2>Wie ben ik?</h2>
        <p>Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Toen ik in de tweede klas wat Duits had geleerd en zover was om zelf een gesprek met mijn oma aan tegaan i.p.v dat mijn ouder het zouden vertalen stierf mijn rond die tijd jammer genoeg.
            <br><br>
            Het was misschien al een beetje duidelijk maar ik heb dus een familie die dus uit Duitsers en uit Nederlanders bestaat. Contact hebben met de Duitse kant van de familie is erg lastig omdat het best een stuk rijden is naar Duitsland. Als ik dus tijd doorbreng met famillie is het meestal met de famillie uit Nederland, wat ik eigenlijk niet heel erg vindt. Ik heb een hele leuke familie en daar ben ik erg blij mee.
            <br><br>
            Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon gewoontjes. Ikzelf zit op dit moment in de vierde klas op Het Baarnsch Lyceum. Mijn paket is NT en het gaat me wel goed af. De school vindt zelf dat ik het zo goed doe dat ik drie uur in de week niet meer hoef te komen. Heel bijzonder is het ook weer niet want die uren waren toch een soort van tussenuren. De bedoeling is dat je in deze uren, waar ik dus niet meer heen ga, huiswerk kan/moet maken dit doet alleen bijna niemand en iedereen zit eigenlijk gewoon te wachten totdat het saaie uur voorbij is.
            <br><br>
            Ik hoop dat ik nu genoeg over mezelf heb verteld en dat je nu al beter weet wie ik ben. Ik weet dat ik niet een heel spannend vaarhaal heb maarja, ik moet nou eenmaal een blog maken hè.
            <br><br>
        </p>               
    </div>

</body>

</html>

最佳答案

我已经达到了你的要求，但我有礼貌地请求下次，你应该自己尝试一下，如果你做不到，谷歌是你的 friend :)

最后，这是代码:https://codepen.io/anon/pen/qLdVLO?editors=1100

它实现了您所要求的一切。

我附加了点击监听器以在单击按钮时添加边框，如下所示:

document.getElementById("but4").addEventListener("click", function() {
   document.getElementById("but1").classList.remove("actief");
   document.getElementById("but2").classList.remove("actief");
   document.getElementById("but3").classList.remove("actief");
   document.getElementById("but4").classList.add("actief");
});

关于javascript - 如何使用 JavaScript 制作工作 header ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53730624/

24 4 0
文章推荐： Python-ModuleNotFoundError : No module named 'x'
文章推荐： python - 如何以编程方式在给定索引的嵌套列表中设置元素？
文章推荐： Python 文本匹配 - 同义词
文章推荐： css - 请帮助按按钮与 CSS 对齐
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com