babakmohamadi

ثابت کردن منوی در بالای صفحه سایت

12 پست در این موضوع

با سلام و درود خدمت دوستان و اساتید

منوی اصلی سایت من حدود 50px از بالا فاصله داره ....

سوالم اینجاست که چطوری میتونم هنگام اسکرول به پایین منوی اصلیم بره به بالای سایت و ثابت بمونه و هنگام اسکرول به بالا به جایگهاهش (50px فاصله از بالا) برگرده؟

از دستور position:fixed; استفاده میکنم ولی تا انتهای صفحه با 50 پیکسل فاصله از بالا , اسکرول میکنه .

با تشکر

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

یه کد jquery هست که این ویژگی رو به منو یا هر چیزی که بخواین در سایت میده.

اون کد به این شکل هست :

var num = 50; //number of pixels before modifying styles
$(window).bind('scroll', function () {
   if ($(window).scrollTop() > num) {
       $('.menu').addClass('fixed');
   } else {
       $('.menu').removeClass('fixed');
   }
});

لازم به ذکره که به جای .menu کلاس یا شناسه بخش مورد نظر رو میزنید ( در قالب شما فکر میکنم میشه #ttr_menu)

همچنین کد css زیر رو باید به فایل های css قالبتون اضافه کنید :

.fixed {
   position:fixed;
   top:0;
}

دموی آنلاین + سورس کامل

موفق باشید

Share this post


Link to post
Share on other sites

آقای طاهری ممنون از راهنماییتون درست به موردی اشاره کردین که مربوط به سوال بنده بود

فقط یه خواهشی داشتم میشه لطفا کنید سورس رو به صورت فایل آماده در اختیارم قرار بدین ؟

Share this post


Link to post
Share on other sites

کد jquery رو با انجام اصلاحات ( جایگزین کردن کلاس یا شناسه منو به جای .menu ) در فایل جاوا اسکریپت ( .js ) قالب میگذارید یا اینکه در فایل layout قالب ( معمولا همون index.php قالب هست ) و در قسمت head بین تگ باز و بسته ای script قرار بدین. خلاصه این که مثل کد جاوااسکریپت باهاش رفتار میکنید.

کد css مربوط به کلاس fixed رو در فایل css قالب و تمام ...

این موارد رو با دقت در نمونه ی آنلاین سایت jsfiddle میتونستید بفهمید.

در پناه حق

Share this post


Link to post
Share on other sites

ممنون از راهنماییتون فقط الان به یه مشکلی برخوردم اون هم اینکه وقتی اسکرول می کنم در پشت برخی از ماژول ها اسکرول میکنه

با چه کدی میتونم جلوتر از سایر ماژول ها قرارش بدم ؟

Share this post


Link to post
Share on other sites

ممنون از راهنماییتون خیلی عالی شد

فقط یه سوال کوچیکی واسم مونده اونم اینکه چطوری میتونم Responsive کنم ؟

Share this post


Link to post
Share on other sites

طفق گفته شما عمل شد و به درستی نمایش داده شد ولی همینطور که ذکر کردین ریسپانسیو نشد!!!

آیا ریسپانسیو کردن کاره مشکلی هست یا دلیل خاصی وجود داره که ذکر نکردین؟

اگه در این مورد هم راهنماییم کنید بسیار بسیار سپاسگذار خواهم بود.

Share this post


Link to post
Share on other sites

سلام دوستان من هم مشکل مشابهی دارم

دمو آنلاین : قالب بومرنگ (Boomerang Template) - جوملا -joomla

میخوام در یک حالت فقظ آیتم های منوی بالا فیکس بمونن و لوگو و دکمه ورود پایین نیان. و در حات دوم کل نوار منوی بالا به انضمام لوگو و همه چیز ثابت بمونن و پایین بیان به همراه اسکرول

توضیحات در خصوص تگ position: fixed رو اجرا کردم ولی به درستی کار نکرد.ینی باعث زیر رفتن منو نسبت به برخی مازول ها میشد.تگ z-index استفاده کردم ولی نوار منو به سمت راست انگار فرو میرفت و از حالت تقارن خارج میشد.

ممنون میشم راهنماییم کنیم

ویرایش شده در توسط nvd.imani

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری