Fixed Navigation

navi 특정 위치에서 fixed

스크롤이 네비게이션 위치에 왔을 때 fixed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate veritatis sunt, commodi repellendus pariatur libero alias non suscipit. Saepe quae ab rerum inventore labore aperiam temporibus commodi dignissimos, accusantium necessitatibus. Sed non nisi amet repudiandae eaque labore sapiente dolores quisquam, neque! Nobis, adipisci ex saepe. Inventore enim architecto minima dignissimos rem ea nemo doloribus maxime, deserunt ab? At reprehenderit excepturi, magnam porro voluptates, voluptatem voluptate aliquid similique, maxime dignissimos consectetur corporis! Voluptatum, impedit, eius optio, cumque quam quaerat ducimus commodi delectus a accusamus temporibus neque eligendi! Culpa eligendi, fugiat suscipit fugit doloremque, dolores praesentium consequatur doloribus, dolorum animi velit optio? Assumenda laborum eaque nisi asperiores in recusandae sunt tenetur omnis odio dicta mollitia, atque optio, distinctio quam porro aperiam quibusdam est quae ullam, rem at molestias vel aliquid obcaecati. Fugiat quasi atque veritatis qui, consectetur nesciunt neque? Dolore temporibus at, eos suscipit beatae iusto, consequatur? Error debitis quaerat nesciunt adipisci temporibus dolorum eum accusamus quae beatae neque minus eos, nam, dolorem earum reiciendis, mollitia enim impedit ut laudantium tempore magnam repudiandae tenetur! Totam cumque, officia, maxime blanditiis dolorum obcaecati placeat ea. Sed fugit autem soluta possimus temporibus exercitationem, aspernatur beatae id nobis nesciunt quisquam aliquid consequatur sequi repudiandae, ipsam nemo reprehenderit quasi repellat molestiae perspiciatis debitis dicta, neque aut. Earum omnis veniam ex delectus dolores excepturi voluptatibus magnam, hic voluptate distinctio quisquam exercitationem odio debitis iure, eaque cumque totam laboriosam mollitia eos in fugit quasi! Laboriosam, enim tenetur. Eos inventore quisquam quibusdam ad cupiditate commodi quasi dolorum a, incidunt in, esse quam quis consequuntur repudiandae laboriosam

javascript


function navFixed(){
        var lnbTop = $('.lnbW').offset().top;
        var lnbHeight = $('.lnbW').outerHeight();

        $(window).scroll(function(){
            var scrTop = $(window).scrollTop();
            if(scrTop > lnbTop){
                $('.lnbW').addClass('fixed');
                $('body').css('padding-top', lnbHeight + 10); //nav fixed 되면서 사라지는 높이값 보정
            } else {
                $('.lnbW').removeClass('fixed');
                $('body').css('padding-top', 0);
            }
        });
    }
    $(function(){
        navFixed();
    });

html


<nav class="lnbW">

        <ul class="clearfix">

            <li><a href="#">menu01</a></li>

            <li><a href="#">menu02</a></li>

            <li><a href="#">menu03</a></li>

        </ul>

    </nav>

    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate veritatis sunt, commodi repellendus pariatur libero alias non suscipit. Saepe quae ab rerum inventore labore aperiam temporibus commodi dignissimos, accusantium necessitatibus. Sed non nisi amet repudiandae eaque labore sapiente dolores quisquam, neque! Nobis, adipisci ex saepe. Inventore enim architecto minima dignissimos rem ea nemo doloribus maxime, deserunt ab? At reprehenderit excepturi, magnam porro voluptates, voluptatem voluptate aliquid similique, maxime dignissimos consectetur corporis! Voluptatum, impedit, eius optio, cumque quam quaerat ducimus commodi delectus a accusamus temporibus neque eligendi! Culpa eligendi, fugiat suscipit fugit doloremque, dolores praesentium consequatur doloribus, dolorum animi velit optio? Assumenda laborum eaque nisi asperiores in recusandae sunt tenetur omnis odio dicta mollitia, atque optio, distinctio quam porro aperiam quibusdam est quae ullam, rem at molestias vel aliquid obcaecati. Fugiat quasi atque veritatis qui, consectetur nesciunt neque? Dolore temporibus at, eos suscipit beatae iusto, consequatur? Error debitis quaerat nesciunt adipisci temporibus dolorum eum accusamus quae beatae neque minus eos, nam, dolorem earum reiciendis, mollitia enim impedit ut laudantium tempore magnam repudiandae tenetur! Totam cumque, officia, maxime blanditiis dolorum obcaecati placeat ea. Sed fugit autem soluta possimus temporibus exercitationem, aspernatur beatae id nobis nesciunt quisquam aliquid consequatur sequi repudiandae, ipsam nemo reprehenderit quasi repellat molestiae perspiciatis debitis dicta, neque aut. Earum omnis veniam ex delectus dolores excepturi voluptatibus magnam, hic voluptate distinctio quisquam exercitationem odio debitis iure, eaque cumque totam laboriosam mollitia eos in fugit quasi! Laboriosam, enim tenetur. Eos inventore quisquam quibusdam ad cupiditate commodi quasi dolorum a, incidunt in, esse quam quis consequuntur repudiandae laboriosam

css


    .clearfix:after {content:''; display:table; clear:both;}

    .lnbW {background:#eee; transition:0.5s;}

    .lnbW.fixed {position:fixed; top:0; left:20px; right:20px; background:tomato;}

    .lnbW > ul {padding:0; margin:0; list-style:none;}

    .lnbW > ul > li {float:left;}

    .lnbW > ul > li a {display:block; padding:10px 20px;}

    .lnbW.fixed > ul > li a:link, .lnbW.fixed > ul > li a:visited {color:#fff;}

fix

Misun's Archive