.elementor-1474 .elementor-element.elementor-element-0d222d7{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:500px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:000px;--padding-bottom:000px;--padding-left:000px;--padding-right:000px;}.elementor-1474 .elementor-element.elementor-element-0d222d7.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-1474 .elementor-element.elementor-element-0d222d7{--width:400px;--min-height:0px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:-1px;--padding-bottom:-1px;--padding-left:-1px;--padding-right:-1px;}}@media(min-width:768px){.elementor-1474 .elementor-element.elementor-element-0d222d7{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-0d222d7 */<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نمونه فوتر چسبان و مخفی شونده</title>
    <style>
        body {
            font-family: Tahoma, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        /* استایل‌های بخش محتوا برای ایجاد اسکرول */
        .content {
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            min-height: 150vh; /* این باعث میشه صفحه به اندازه کافی بلند باشه تا اسکرول بخوره */
            line-height: 1.8;
            direction: rtl; /* برای فارسی */
            text-align: justify; /* برای مرتب شدن متن */
        }

        h1 {
            color: #0056b3;
            text-align: center;
            margin-bottom: 30px;
        }

        p {
            margin-bottom: 15px;
        }

        /* استایل‌های فوتر */
        .my-footer { /* اینجا از کلاس 'my-footer' استفاده کردم */
            position: sticky;
            bottom: 10px; /* 10 پیکسل از پایین صفحه فاصله داشته باشه */
            left: 10px;
            right: 10px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.7); /* پس‌زمینه شیشه‌ای */
            backdrop-filter: blur(3px); /* افکت بلور */
            border-radius: 50px; /* گوشه‌های گرد */
            padding: 15px 25px; /* کمی فضای داخلی */
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* سایه برای بهتر دیده شدن */
            border: 1px solid rgba(255, 255, 255, 0.3); /* حاشیه شفاف */

            /* استایل‌های برای مخفی بودن اولیه و انیمیشن */
            opacity: 0; /* در ابتدا کاملاً مخفی */
            pointer-events: none; /* تا وقتی مخفی هست روش کلیک نشه */
            transition: opacity 0.4s ease-in-out; /* انیمیشن نرم برای ظاهر و پنهان شدن */
        }

        .my-footer.show {
            opacity: 1; /* وقتی کلاس show اضافه شد، ظاهر بشه */
            pointer-events: auto; /* امکان کلیک و تعامل پیدا کنه */
        }

    </style>
</head>
<body>

    <div class="content">
        <h1>خوش آمدید به صفحه آزمایشی</h1>
        <p>این یک صفحه نمونه برای نمایش عملکرد فوتر چسبان و مخفی شونده است. لطفا به پایین اسکرول کنید تا فوتر را مشاهده کنید.</p>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        <p>متن فوق در واقع متنی بی معنی است که صرفا برای پر کردن فضا و نمایش قالب‌بندی استفاده می‌شود. هدف این است که محتوای کافی وجود داشته باشد تا شما بتوانید اسکرول کنید و عملکرد فوتر را ببینید.</p>
        <p>به یاد داشته باشید که برای مشاهده بهتر، باید صفحه را به اندازه کافی به پایین اسکرول کنید. این فوتر طوری تنظیم شده که فقط زمانی که به انتهای صفحه نزدیک می‌شوید، ظاهر شود و در پایین صفحه چسبیده باقی بماند.</p>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
    </div>

    <footer class="my-footer">
        <p>این فوتر وب‌سایت شماست. © 2025 تمام حقوق محفوظ است.</p>
        <p>تماس با ما: info@example.com</p>
    </footer>

    <script>
        // جاوااسکریپت برای کنترل ظاهر شدن فوتر
        window.addEventListener('scroll', function() {
            const footer = document.querySelector('.my-footer'); // اینجا باید کلاس فوترت رو بنویسی
            const scrollThreshold = document.body.scrollHeight - window.innerHeight - 200; // 200 پیکسل قبل از انتهای صفحه

            // اگر کاربر به 200 پیکسل قبل از انتهای صفحه رسید
            if (window.scrollY >= scrollThreshold) {
                footer.classList.add('show'); // کلاس 'show' رو اضافه کن تا ظاهر بشه
            } else {
                footer.classList.remove('show'); // در غیر این صورت، کلاس 'show' رو حذف کن تا مخفی بشه
            }
        });
    </script>

</body>
</html>/* End custom CSS */