نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

روش ساختن منوی ثابت در طراحی سایت:

برای ساختن منویی که ثابت باشد چند راه وجود دارد که من در این مقاله خلاصه و مفید خدمت شما عرض می کنم.

یکی از راهها استفاده از کد css  هست که حتما با آن آشنایی دارید.

که در این حالت از خصیصه ی position  استفاده می کنیم و مقدارش را برابر fixed  می گذاریم به صورت زیر:

#menu{positon: fixed;}

و حال می خواهیم منوی ما به صورت خاص ثابت شود یعنی مثلا از یک ارتفاعی به بعد یا با یک انیمیشن یا حالت خاص،

که در این صورت از کد جی کوئری باید استفاده کنیم.

که این راه هم به چند روش ممکن هست که مثلا من یکی از متداول ترین و البته قابل فهم ترین آنها را برایتان شرح می دهم.

ابتدا کد مربوطه را برایتان می نویسم و سپس توضیحات لازم را خدمت شما عرض می کنم.

$(function(){

        // Check the initial Poistion of the Sticky Header

        var stickyHeaderTop = $('#stickyheader').offset().top;




        $(window).scroll(function(){

                if( $(window).scrollTop() > stickyHeaderTop ) {

                        $('#stickyheader').css({position: 'fixed', top: '0px'});

                        $('#stickyalias').css('display', 'block');

                } else {

                        $('#stickyheader').css({position: 'static', top: '0px'});

                        $('#stickyalias').css('display', 'none');

                }

        });

  });

استفاده از js در منوی ثابت:

در این کد ابتدا یک تابع را تعریف می کنم و یک متغیری با عنوان stickyHeaderTop  که مقدارش را برابر با شروع از بالای منو قرار می دهیم .

سپس تعریف می کنیم هنگامی که سایت اسکرول عمودی می خورد چه اتفاقی بیفتد یا چه تابعی اجرا شود.

تعریف می کنیم هنگامی که اسکرول مقدارش بیشتر از شروع ارتفاع منو شد.

در واقع زمانیکه تا زیر منو اسکرول خورد به آی دی stickyheader  که برای منو تعریف شده مقدار css  ، position را برابر fixed  قرار می دهیم و top  را هم صفر می گذاریم .

و برای آی دی که داخل منو تعریف می شود (که این کاملا به کد شما بستگی دارد ) مقدار خصیصه ی display را برابر block قرار می دهیم.

که کل عرض صفحه سایت را بگیرد.

و بعد از if  یک else  می گذاریم که در غیر اینصورت مقدار آی دی اولی را stickyheader  را مقدار position  را برابر استاتیک یا همان حالت عادی تعریف می کنیم

مقدار top هم که همان صفر می شود.

و id  بعدی هم که stickyalias هست رو مقدار display آن را برابرnone  می گذاریم یعنی در واقع این قسمت را نمایش ندهد.

باز هم عرض می کنم که روش های مختلفی وجود دارد برای این کار که بستگی به کد شما و درکتان از زبان برنامه نویسی جاوا اسکریپت دارد.

و طراحی سایت های بسیاری در این زمینه وجود دارد که روش های متنوع تری رو  در اختیارتان قرار می دهد.