چطوری Position Fixed رو مشخص کنیم که بعد از گذر از یک مکان ایجاد شود ؟

این تاپیک 19 پاسخ و 4 مشارکت کننده دارد . آخرین آپدیت توسط :  Younes Mohammadi ،‏ 1 سال و 4 ماه پیش .

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

تگ شده :  , , ,

نویسنده پست
یکشنبه ، 26 جولای 2015     2:44 ب.ظ #


Younes Mohammadi

Subscriber
7 پست1 تاپیک

با سلام . میخواستم بدونم چطوری باید از Position: Fixed طوری استفاده کنیم که مثلا از یک جایی که رد شدیم به حالت Position: Fixed در بیاد ؟ مثلا توی بعضی سایت ها منو ها ثابت هستند ولی بعد از اینکه از منو رد میشی منو به حالت Position: Fixed در میاد . اگر میشه کمکم کنید .

0  تشکر
یکشنبه ، 26 جولای 2015     4:55 ب.ظ #


shima arabi

Subscriber
99 پست29 تاپیک

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

position:fixed زمانی کاربرد داره که بخایم عنصری دقیقا در جای معینی ثابت بشه و با حرکت اسکرول موس حرکت نکنه یه چیزی شبیه باکس "سون لرن را دوست دارم" توی همین سایت.  فکر میکنم منظور شما هم همین باشه و همونطور که خودتون گفتید باید ویژگی position از استایل عنصر رو fixed قرار بدید و بعد بنا به مکانی که میخاید عنصر قرار بگیره به

ویژگی های ,right,top یا,bottom,left  مقدار بدید.

مثلا من میخام یه باکس در گوشه راست صفحه داشته باشم که باندازه 50 پیکسل از راست صفحه و 10 پیکسل از بالای صفحه فاصله داشته باشه

position: fixed;

right: 50 px;

top: 10px;

این مقادیر میتونن منفی هم باشن برای مواقعی که میخاید بخشی از باکس شما بیرون کادر و پشت صفحه باشه

0  تشکر
یکشنبه ، 26 جولای 2015     5:26 ب.ظ #


Younes Mohammadi

Subscriber
7 پست1 تاپیک

نه منظور من این نبود ، اینجایی که گفتمو دقت کنین :

منو ها ثابت هستند ولی بعد از اینکه از منو رد میشی منو به حالت Position: Fixed در میاد .

منظورم از ثابت همون اینه که رو صفحه نمیاد مثلا (از لینک عذر میخوام) سایت yasdl.com  منوش زیر هدر هست اما بعد از اینکه از منو رد میشی اون منو به حالت Position: Fixed در میاد . اولش که از منو رد نمیشی Position: Fixed نیست .

0  تشکر
یکشنبه ، 26 جولای 2015     5:47 ب.ظ #


بردیا راستین

Subscriber
93 پست7 تاپیک

باید از یک کد جی کوئری مثل این استفاده کنید.فایل کد هم ضمیمه شد.

پیوست ها:
You must be logged in to view attached files.
0  تشکر
یکشنبه ، 26 جولای 2015     5:56 ب.ظ #


shima arabi

Subscriber
99 پست29 تاپیک

بله الان متوجه شدم پوسیشن منو از static به  fixed  تغییر میکنه حتی کلاس دایو منو هم با حرکت اسکرول عوض میشه به نظرم این کار با جاوا باید باشه اما هیچ فایل جاوایی ضمیمه دایو منو نمیبینم البته دوتا عبارت before:: و after:: هست که نمیدونم چطور ایجاد شده هرکی فهمید بگه ما هم یاد بگیریم

0  تشکر
یکشنبه ، 26 جولای 2015     6:01 ب.ظ #


بردیا راستین

Subscriber
93 پست7 تاپیک

لینک این مثال رو نگاه کنید کاملا متوجه میشید .

http://jsfiddle.net/FyEGN/2/

2  تشکر
یکشنبه ، 26 جولای 2015     6:25 ب.ظ #


Younes Mohammadi

Subscriber
7 پست1 تاپیک

خیلی ممنون فقط میخواستم بدونم این کد یعنی :

$(window).scroll(function(){
if ($(this).scrollTop() > 135) {
$('#task_flyout').addClass('fixed');
} else {
$('#task_flyout').removeClass('fixed');
}
});

رو کجای باید قرار بدم ، منظورم اینه که از Java Script چطوری باید توی صفحه HTML استفاده کرد ، به عنوان مثال CSS رو باید تو Style بزاری ، حالا JS کجا باید باشه ؟ اگه میشه کد آمادشو واسم بزارین . آخه تاحالا از JS استفاده نکردم .

0  تشکر
یکشنبه ، 26 جولای 2015     6:29 ب.ظ #


بردیا راستین

Subscriber
93 پست7 تاپیک

این کد رو بزارید توی تگ script و سپس توی تگ head یا قبل از بسته شدنه تگ body قرار بدید. فقط یادتون نره که کلاس فیکس رو باید توی فایل سی اس اس تعریف کنید و + 'task_flyout' رو هم با ایدی تگ مورد نظرتون عوض کنید به صورت #yourtagid .  به عنوان مثال :
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 135) {
$('#task_flyout').addClass('fixed');
} else {
$('#task_flyout').removeClass('fixed');
}
});
</script>

ویرایش گر انجمن سون لرن هم که واقعا آدمو دق میده :دی

1  تشکر
یکشنبه ، 26 جولای 2015     6:50 ب.ظ #


shima arabi

Subscriber
99 پست29 تاپیک

دوست عزیز مثال خوب و واضحی بود کلا سایت خوبیه

تشکر

در مورد ویرایشگر کد من هم با شما موافقم

1  تشکر
یکشنبه ، 26 جولای 2015     6:52 ب.ظ #


بردیا راستین

Subscriber
93 پست7 تاپیک

خواهش میکنم.

جناب محمدی اگه مشکلتون حل شده تاپیک رو ببندید.

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

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