Çözüldü Sticky Navbar Sticky Özelliği Göstermiyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

Primearc

Hectopat
Katılım
3 Ocak 2021
Mesajlar
1.489
Makaleler
3
Çözümler
13
Yer
Matrix
Adım adım görseller şöyle:

Ekran görüntüsü 2021-03-17 133018.png

Ekran görüntüsü 2021-03-17 133042.png
Ekran görüntüsü 2021-03-17 133109.png


Son fotoğrafta görüleceği üzere aşağı indiğimde üstte sabit kalmıyor.


HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">

    <title>asdf</title>

    <style>
        * {
            margin: 0px;
            font-family: 'Work Sans', sans-serif;
            font-weight: lighter;
        }

        body {
            background-color: #2F3036;
        }

        nav {
            display: flex;
            position: sticky;     
            background-color: #2F303F;
            opacity: 0.8;
            height: 40px;
            text-align: center;
            align-items: center;
            justify-content: center;

        }

        article {
            color: ghostwhite;
            margin-left: 100px;
            margin-right: 100px;
            margin-bottom: 100px;
        }

        ul li a {
            display: block;
            text-decoration: none;
            color: #d6d6d6;
            font-family: 'Palanquin', sans-serif;
            font-weight: lighter;
            word-spacing: 5px;
            min-width: 150px;
            text-align: center;


        }



        ul li a:hover {
            color: white;
            transition: 500ms;
        }

        ul li {
            list-style: none;
            display: inline-block;
            margin-right: 1px;
            padding: 0px 20px;
        }



        #HeadImage {
            background-image: url(img/AnimatedMicrochip2.gif);
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 940px;
        }

        #HeadTitle {
            color: ghostwhite;
            font-family: 'Major Mono Display', monospace;
            font-size: 100px;
            display: inline-block;
            position: relative;
            font-weight: lighter;
            margin: 20px;
        }

        #Logo {
            text-align: left;
            color: #d6d6d6;
            font-family: 'Major Mono Display', monospace;
            font-weight: bold;
            text-decoration: none;
            font-size: 20px;
        }

        #Logo:hover {
            color: white;
            transition: 500ms;
        }

        .Flex {
            display: flex;
            margin-top: 80px;
            font-weight: lighter;
            width: 100%;

        }

        .ArticleHeader {
            display: inline-block;
            margin-bottom: 40px;
            word-spacing: 50px;
            font-size: 70px;
        }

        .ArticleText {
            font-size: 24px;
        }

        .FirstArticle {
            width: 40%;

        }

        .SecondArticle {
            margin-left: 50px;
            width: 20%;
            float: right;


        }
    </style>

</head>

<body>

    <header>

        <div id="HeadImage">

            <p id="HeadTitle">
                asd
            </p>

        </div>

    </header>

    <nav>

        <span><a id="Logo" href="">A</a></span>

        <ul>

            <li><a href="">asdfm</a></li>
            <li><a href="">adsf</a></li>
            <li><a href="">asdf</a></li>
            <li><a href="">asdf</a></li>

        </ul>

    </nav>
    <article>
        <div class="Flex">
            <div class="FirstArticle">
                <div class="ArticleHeader">
                    RA9?
                </div>

                <p class="ArticleText">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quidem! Accusantium eius, quaerat error suscipit obcaecati itaque, nihil iure minus distinctio laudantium repudiandae, sit illo tenetur adipisci. Facere, cumque aperiam!
                </p>

            </div>
            <div class="SecondArticle">
                <img style="height: 300px; width: 400px; border-radius: 5px;" src="img/anakart.gif" alt="Anakart">

            </div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, eos? Ipsam praesentium corrupti maiores iste illum. Voluptate eius vel omnis quaerat. Obcaecati libero odio incidunt perspiciatis corrupti expedita quis placeat maxime tempore autem, modi fuga ex, culpa ea sequi nemo molestiae alias optio necessitatibus assumenda deserunt tempora qui neque accusantium? Dicta molestias eum et vitae nihil facilis doloremque obcaecati perferendis. Odio, quos porro quae esse necessitatibus temporibus facere sint, architecto totam qui voluptatum magnam hic fugiat? Suscipit ullam nulla voluptatum amet esse consequatur beatae iste delectus magni possimus repellat aliquid odio minus tempore, voluptatibus, earum at labore ex, excepturi sit. Ut, iste harum. Nesciunt maiores nam enim quam cupiditate totam a accusantium ipsam assumenda mollitia quos iusto repellendus deserunt itaque necessitatibus sapiente, sit neque minus pariatur? Ducimus esse fugiat, nihil quas praesentium nam nobis vel. Distinctio at enim odio illum voluptatibus eos quidem labore sit earum veritatis? Dolorum possimus mollitia quos, quam doloremque quidem repudiandae ipsum dolorem quod, dolores ducimus. Nulla iure laborum consectetur reiciendis ab, aperiam ex architecto deleniti laboriosam a unde dolorum voluptates animi cupiditate excepturi distinctio accusantium vero dolores, sed nesciunt aliquid! Distinctio omnis quod magnam animi id. In saepe excepturi culpa velit eveniet perspiciatis cum nobis recusandae aperiam enim earum omnis atque nostrum, quae sint, quaerat distinctio optio voluptatibus animi quas aspernatur deserunt ducimus. Sapiente quia odio perferendis nihil est enim voluptatibus culpa, possimus commodi illum obcaecati hic eum voluptas ipsam ea laudantium asperiores distinctio reiciendis, beatae sequi. Officiis nulla recusandae debitis. Assumenda, perferendis. Doloremque quaerat at quod aliquid! Aliquam id dolorem delectus obcaecati. Animi rem, facilis non nobis nihil repudiandae sed officiis blanditiis possimus maxime doloribus ducimus suscipit facere nulla deleniti eius necessitatibus! At deleniti beatae atque dolore velit commodi amet sequi, neque similique fugiat qui dignissimos excepturi laudantium, quas delectus. Sunt vel enim soluta et asperiores, recusandae assumenda voluptate provident corrupti, pariatur fugit omnis dicta nobis deserunt voluptates, at nesciunt laboriosam iste! Voluptatem sit explicabo inventore et veritatis nihil nemo praesentium laudantium ipsum deserunt. Ipsam at quasi illo possimus officiis ratione aspernatur unde exercitationem harum, libero aperiam quaerat voluptatum et sunt sapiente. Magni esse velit, non ullam officiis nobis iure perspiciatis adipisci consectetur id atque harum numquam aperiam dolorem quod a unde tempora molestias! Voluptate dignissimos laborum nulla maxime sapiente nemo excepturi quia eaque laboriosam veritatis reiciendis cupiditate qui quaerat at fugiat nobis suscipit veniam neque, repellendus delectus obcaecati minus explicabo dolorum ea. Quisquam tempora possimus, soluta cumque alias quidem corporis numquam deserunt culpa totam itaque, iusto aliquam quod odio autem dolorum eligendi fuga modi reprehenderit ipsam a nam perspiciatis. Facilis, voluptas? Enim error cum ab neque architecto exercitationem labore. Saepe accusantium accusamus nemo dignissimos alias libero reprehenderit eos optio exercitationem consectetur vel, quia illum doloremque odio amet, ullam distinctio nostrum. Aperiam magnam sequi cumque corrupti expedita sed ea exercitationem ipsum ipsa quod modi, fuga in pariatur omnis assumenda nisi doloribus. Veniam aspernatur asperiores, architecto esse ex a harum quo cumque unde quis eius facere temporibus, aliquam, maxime sunt tempore laudantium ipsum perspiciatis. Aliquam accusantium itaque explicabo iusto eaque consequuntur consectetur, architecto nesciunt nobis. Ipsam nisi, in repellat ab explicabo illo! Accusantium iste neque nesciunt explicabo nobis est asperiores incidunt possimus eius aliquid corrupti optio illum, dolorem voluptates ut id vero tenetur, ullam, sequi perspiciatis eligendi et repellat! Maiores officia tempore mollitia officiis quaerat, suscipit fugiat nam labore dolorem blanditiis et enim nemo atque earum natus totam consequatur quisquam a recusandae quo cupiditate ea fuga? Nisi tempore sint saepe asperiores nam aliquid illum deleniti, distinctio est consequatur nemo accusantium autem sit! Optio earum atque consequatur non perferendis ad culpa nam necessitatibus minima laboriosam! Sint ullam optio officiis earum quasi, accusantium laborum voluptatum ad, tempora dolorum totam minima error voluptas voluptates! Voluptatum ipsa facere, culpa possimus accusamus excepturi est illum exercitationem asperiores officiis quisquam eaque unde aliquam iste eius doloremque vero, quae accusantium, fugiat distinctio harum maiores officia saepe esse! Error quasi repudiandae sunt esse perspiciatis exercitationem dolorum. Labore natus accusantium amet nesciunt sequi reiciendis, aut tenetur, dignissimos eum ipsam modi expedita repellat. Harum voluptatibus voluptatem dolorem deleniti alias doloremque laborum, voluptates nobis! Accusamus totam vero dicta error animi, eum officiis perferendis incidunt vel! Sunt tempore iure, nostrum quidem amet iusto adipisci dolores quam modi laborum, quasi dicta mollitia deserunt nam optio molestias in placeat delectus consequuntur hic? Tenetur, soluta, porro culpa excepturi sequi ab, sapiente error modi eligendi exercitationem qui aliquid quam! Nostrum accusamus possimus error magni corporis debitis beatae laudantium quae reprehenderit ipsum aliquid minima est eaque nobis numquam, voluptatibus impedit distinctio libero eos officiis in nihil placeat tempore! Suscipit, nemo? Soluta, quas sed praesentium amet assumenda eveniet quod mollitia unde itaque quos. Nobis vitae delectus quas, repudiandae iure accusamus consequatur soluta minima. Nesciunt aut illum quis modi excepturi provident quia! Consequuntur minima ut qui recusandae fugiat vitae consequatur totam quaerat cum odit, id sequi quos eos blanditiis temporibus, et rem corrupti animi unde eius incidunt. Natus assumenda est itaque consectetur cupiditate dolorem fugit. Sapiente, aspernatur quos. Odit fuga dolor dolore laudantium facilis sit voluptatem error nisi quibusdam non soluta cumque exercitationem architecto repellat suscipit est odio, nesciunt eius! Maxime, corrupti quibusdam vel quas temporibus dolores, laudantium fuga totam tempore maiores facere! Iste incidunt dolore distinctio impedit. Ullam pariatur vel, quis alias reiciendis beatae nobis quo esse minima. Incidunt earum dolor neque harum obcaecati consequuntur, quidem quod odio, est nam quibusdam, ipsam eum laborum aperiam ad! Earum est quas rem veniam debitis laudantium placeat molestias vero architecto quam, suscipit unde in a dolorum culpa perferendis sunt perspiciatis, quisquam sed hic qui facere aliquid minima? Numquam voluptas et tempore delectus officia dolor labore ad ullam maxime, dolorem sequi, nulla ab harum facere quaerat, modi beatae rerum architecto distinctio quibusdam ut deserunt suscipit quae amet? Error sequi aut, veniam saepe velit fugiat, similique delectus mollitia, maiores inventore consequatur perspiciatis atque consectetur dolores vitae? Aliquid harum reiciendis quisquam quae ipsa architecto autem facere delectus! Doloremque reprehenderit quidem optio et tempora explicabo saepe odio, accusantium perferendis velit natus ullam quisquam minus officiis. Nobis doloremque et quae assumenda.

        </div>

    </article>






</body>

</html>


Paragrafı problemi göstermek için koydum.
 
Son düzenleyen: Moderatör:
Evet işe yaradı. Ama neden yaradı? Daha önce hiç böyle bir şey yapma gereği duymamıştım.
Soru kısmına almayı unutmuşum. Moderatörler "Çözüldü" olarak işaretleyebilir mi?
Sticky Navbar bu şekilde yapılıyor: How To Create a Sticky Element

Top değeri vermeden "position: fixed;" ile sabitleyebilirsin fakat nav'ın view'ın altında kalıyordu.
 

Geri
Yukarı