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

[babakmohamadi 10]

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

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

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

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

با تشکر

[Vahid Taheri 74]

یه کد 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;
}

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

موفق باشید

[babakmohamadi 10]

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

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

[Vahid Taheri 74]

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

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

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

در پناه حق

[babakmohamadi 10]

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

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

[ابوالفضل طالبی 280]

باید موقعیت مربوط به منو را z-index بدید به شکل زیر:

z-index: 10000

[babakmohamadi 10]

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

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

[ابوالفضل طالبی 280]

بهش عرض ثابت ندید مثلا 900px

عرض رو به درصد بدید

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

[babakmohamadi 10]

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

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

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

[ابوالفضل طالبی 280]

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

http://getbootstrap.com

نمونه قالب ریسپانسیو وجود داره

[babakmohamadi 10]

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

سپاس و درود فراوان بر شما

[nvd.imani 10]

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

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

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

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

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

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