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

ساخت منوی چسبان 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;
}


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

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

پکیج غول آموزش برنامه نویسی PHP با ساخت فروشگاه { دیجیکالا }


This will close in 0 seconds