ثابت کردن منوسایت در زمان اسکرول مانند این قالب سایت

این تاپیک 11 پاسخ و 4 مشارکت کننده دارد . آخرین آپدیت توسط :  حمید رضا مصطفی زاده ،‏ 11 ماه و 3 هفته پیش .

این تاپیک تاکنون 533 بازدید داشته است .

نویسنده پست
شنبه ، 19 دسامبر 2015     5:30 ب.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

دوستان سلام من میخوام منوهای سایتم در صورت اسکرول مانند این قالب سایت در بیاد کسی میتونه کمکم کنه.باتشکر.

0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
شنبه ، 19 دسامبر 2015     6:27 ب.ظ #


ghafari

Subscriber
10 پست0 تاپیک

برای ثابت کردن منو بدون انیمیشن فقط کافیه به element حاوی تب های منو این کد رو اضافه کنی
position : fixed

0  تشکر
شنبه ، 19 دسامبر 2015     6:35 ب.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

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

0  تشکر
شنبه ، 19 دسامبر 2015     7:11 ب.ظ #


ghafari

Subscriber
10 پست0 تاپیک

خب من کدای وب رو بررسی کردم نیاز به انیمیشن نداره یه کلاس به اسم navbar-custom-animate هستش

که وقتی به پایین اسکرول میشه به کلاس های منو اضافه می شه
و  وقتی اسکرول سر جای اولش بر می گرده از کلاس های منو حذف میشه با transition که شبیه یک انیمیشن به نظر می رسه.

کد جی کوئری برای اضافه و حذف کردن کلاس
بجای navbar-fixed-top اسم کلاس منوی خودت رو بذار که کلاس navbar-custom-animate رو موقع اسکرول اضافه کنه و وقتی اسکرول به حالت اولیه اش برگشت از لیست کلاسها حذفش کنه.

$(window).scroll(function(){
if($('.navbar').offset().top>50){
$('.navbar-fixed-top').addClass('navbar-custom-animate');
}else{
$('.navbar-fixed-top').removeClass('navbar-custom-animate');
}
});

کد سی اس اس استفاده شده برای کلاس navbar-custom-animate

.navbar-custom-animate{
padding: 0px;
border-bottom: 1px solid rgba(255,255,255,.3);
background:#000;
}

برای دادن افکت حرکت که شبیه انیمشین هست کافیه به استایل کلاس یا آیدی منو این کد رو اضافه کنی

transition: all 0.3s

0  تشکر
شنبه ، 19 دسامبر 2015     9:46 ب.ظ #


حمید رضا مصطفی زاده

Subscriber
125 پست11 تاپیک

بله دقیقا همین هایی هست که دوستمون گفتن (اگر دانشجو بوت استرپ هستید جلسه 16 را ببینید).

از دوستان کسی هست که بدونه علت اینکه در کروم این انیمیشن هاش درست اجرا نمیشه؟انگاری میلرزه!!!

2  تشکر
شنبه ، 19 دسامبر 2015     10:28 ب.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

مممنون دوستان ولی من متوجه نشدم چیکار کنم بجای این کلاس navbar-fixed-topبیام از این کلاس استفاده کنمnavbar-custom-animate.من کد منوام را تایپیک قبل پیوست کردم.

0  تشکر
شنبه ، 19 دسامبر 2015     10:36 ب.ظ # پاسخ تائید شده توسط سوال کننده


ghafari

Subscriber
10 پست0 تاپیک

کدتو اینجا پیوست کن؛ بجای کلاس navbar-fixed-top کلاس منوی خودت رو بذار

0  تشکر
شنبه ، 19 دسامبر 2015     10:39 ب.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

من معذرت میخوام این کد منوی من.من متوجه نمیشم من یک ای دی دادم به منوام به نام menuکه بتونم برای دکمه ای که قرار دادم برای برنک.این کد منوی من.

پیوست ها:
You must be logged in to view attached files.
0  تشکر
شنبه ، 19 دسامبر 2015     11:40 ب.ظ #


Sajjad Sohrabi

Subscriber
118 پست8 تاپیک

سلام

دوستان عزیز پلاگین easing همینجوریه تو کروم  نمایشش مشکل داره

میتونید از پلاگین  wow  استفاده کنید دقیقا همه چیش مثل این پلاگینه  easing  هست فقط   باید فایلای  plugin wow  رو به صفحه فراخونی کنید

0  تشکر
یکشنبه ، 20 دسامبر 2015     8:23 ق.ظ #


mohammad karimi

Subscriber
144 پست100 تاپیک

اقای غفاری عزیز من بعضی کلاس هارا تست کردم جواب نداد..

0  تشکر
پست 1 تا 10 (از مجموع 12 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .