fixed vs sticky

سوال

سلام به همگی آیا کسی میدونه تفاوت position: fixed با position: sticky دقیقا چیه؟

مرسی

حل شده 1
Mohsen 4 سال 4 پاسخ ها 1314 دیده شده 6

پاسخ ها ( ۴ )

  1. عرض سلام و ادب خدمت دوست درسمنی!

    وقتی position یک شی در حالت fixed قرار می گیرد آن شی به موقعیت جدید خود رفته و در آن مکان ثابت می شود حتی اگر صفحه اسکرول هم بخورد مکان آن دیگر تغییر نمی کند!!!
    وقتی position یک شی در حالت sticky قرار می گیرد آن شی زمانی که صفحه اسکرول بخورد به موقعیت جدید خود منتقل می شود و دیگر مکان آن تغییر نمی کند!!
    fixed و sticky تفاوت های دیگه ایی هم دارند اما مهم ترین اون ها همینی بود که براتون توضیح دادم! موفق باشید.

    بهترین پاسخ
  2. fixed
    این حالت کاملا مشابه به حالت absolute می باشد یعنی عنصر در flow خارج می شود اما تفاوت این حالت در این است که عنصر بجای آنکه نسبت به یک عنصر از اجدادش تعیین مکان شود, نسبت به viewport مکانش مشخص می شود. و نکته دیگر اینکه در آن مکان در هر حالتی ثابت می ماند و حتی اسکرول کردن صفحه روی آن تاثیری نخواهد گذاشت.
    یکی از پرکاربردترین موارد برای استفاده از حالت fixed برای ثابت کردن هدر یا منوی اصلی سایت در بالای صفحه می باشد. یا گاهی تبلیغات را در کنار صفحه بوسیله این حالت بطور زجرآوری برای کاربر ثابت می کنند 🙂
    در دموی زیر اسکرول کنید تا تاثیر این حالت را بر روی منو مشاهده کنید:
    See the Pen position: fixed; by Mojtaba Seyedi (@seyedi) on CodePen.
    sticky
    این حالت مخلوطی از حالت relative و fixed می باشد. عنصر شبیه به حالت relative رفتار می کند تا وقتی که به یک نقطه از اسکرول برسد. سپس بلافاصله رفتارش به حالت fixed تبدیل می شود. کد زیر را در نظر بگیرید:
    .element {
    position: sticky;
    top: 20px;
    }

    در اینجا عنصر در هر کجا که باشد تا زمانی که اسکرول باعث نشود تا فاصله آن از بالای صفحه بع ۲۰ پیکسل برسد رفتار relative خواهد داشت اما به محض اینکه فاصله آن در زمان اسکرول به ۲۰ پیکسلی بالای صفحه برسد در همان فاصله از بالای صفحه ثابت خواهد ماند

  3. با سلام

    وقتی که ما position در حالت fixed قرار میدیم اون شی دیگه ثابت میشه حتی اگه اسکرول هم بخوره ثابت می مونه.

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

    اما Position sticky این حالت مخلوطی از حالت relative و fixed می باشد. عنصر شبیه به حالت relative رفتار می کند تا وقتی که به یک نقطه از اسکرول برسد. سپس بلافاصله رفتارش به حالت fixed تبدیل می شود.

     

  4. سلام وقت بخیر،
    Position fixed : برای تعین جایگاه ثابت المان ها استفاده میشه و حتی اگر صفحه اسکرول شود جایگاهش حفظ میشود و تکان نمیخورد.
    Position sticky :ترکیبی از  fixed و Relative است که در حالت کلی Relative است ولی اگر به نقطه خاصی برسد به fixed تغییر میکند و بیشتر برای منو سایت استفاده میشود.

    برای اطلاعات بیشتر به سایت های زیر سر بزنید…

    css-tricks.ir/reference/position
    roxo.ir/css-positions

     

ارسال یک پاسخ