ساخت منوی چسبان Sticky Menu با جاوا اسکریپت

منوی چسبان با جاوا اسکریپت – در این آموزش با html / css / javascript و ویژگی سی اس اس position : fixed منو را در هدر صفحه ثابت نگه می داریم تا هنگام اسکرول هم کاربر قادر به مشاهده آن باشد .

همچنین با ویژگی classList کلاس sticky را با توجه به شرایط add یا remove می کنیم .
دموی پایین برای درک بهتر مشاهده کنید :

دموی برنامه

فایل index.html

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>

<body>
    <div class="container">
        <h1>رپید کد</h1>
        <header id="menu-1" class="menu">
            <nav>
                <ul>
                    <li><a href="https://rapidcode.ir">رپید کد </a></li>
                    <li><a href="#">صفحه 1</a></li>
                    <li><a href="#">صفحه 2</a></li>
                    <li><a href="#">صفحه 3</a></li>
                    <li><a href="#">صفحه 4</a></li>
                    <li><a href="#">صفحه 5</a></li>
                    <div class="clearfix"></div>
                </ul>
            </nav>
        </header>
        <section class="content content-1"></section>
        <section class="content content-2"></section>
        <section class="content content-3"></section>
        <section class="content content-4"></section>
    </div>
    <script src="static/js/app.js"></script>
</body>

</html>

اسکریپت app.js برنامه

// DOM
const menu1DOM = document.getElementById('menu-1');
const containerDOM = document.getElementsByClassName('container')[0];

// property
let menu1DOMStyles = getComputedStyle(menu1DOM);
let menu1DOMWidth = parseInt(removePxPrefix(menu1DOMStyles['width']));
const containerDOMMarginLeft = parseInt(getComputedStyle(containerDOM)['marginLeft']);

// set handlers
window.onscroll = windowOnScrollHandler;

// handlers
function windowOnScrollHandler() {
    const thisElement = this;
    const scrollTop = thisElement.scrollY;


    const menu1DOMHeight = parseInt(removePxPrefix(menu1DOMStyles['height']));

    if (menu1DOMHeight - 10 <= scrollTop) {

        menu1DOM.classList.add("sticky");
        menu1DOMStyles = getComputedStyle(menu1DOM);
        const menu1DOMPaddingRL = 10;
        menu1DOM.style.width = menu1DOMWidth + "px";
        menu1DOM.style.right = (containerDOMMarginLeft - menu1DOMPaddingRL) + "px";

    } else {
        menu1DOM.classList.remove("sticky");
        menu1DOM.style.right = "auto";
    }

}

// helpers
function removePxPrefix(pxcss) {
    const tmpPxCss = pxcss.replace("px", '');
    return tmpPxCss;
}

فایل main.css

body {
    margin: 0 !important;
    scroll-behavior: smooth;
}

.content {
    width: 100%;
    height: 1200px;
    background-color: gray;
}

.content-1 {
    background-color: cyan;
}

.content-2 {
    background-color: tomato;
}

.content-3 {
    background-color: lime;
}

.content-4 {
    background-color: magenta;
}

.clearfix {
    clear: both;
}

#menu-1 {
    background-color: #ff5722;
    border-bottom: 6px dotted transparent;
    transition: 0.3s all;
}

#menu-1.sticky {
    position: fixed;
    background-color: #ffc107;
    border-bottom-color: #f44336;
    top: 0;
    padding: 0 10px;
}

#menu-1 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu-1 ul li {
    float: right;
}

#menu-1 ul li a {
    text-decoration: none;
    display: block;
    color: white;
    font-weight: bold;
    padding: 15px;
    margin-left: 25px;
}

دانلود سورس منوی چسبان با جاوا اسکریپت

ساخت منوی چسبان Sticky Menu با جاوا اسکریپت

دموی برنامه

فایل index.html

اسکریپت app.js برنامه

فایل main.css

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ