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

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

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

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

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

با تشکر

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

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

موفق باشید

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

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

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

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

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

در پناه حق

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

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

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

z-index: 10000

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

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

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

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

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

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

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

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

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

http://getbootstrap.com

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

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

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

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

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

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

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

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