الفرق بين fixed و sticky في CSS

أعتقد أنك تقصد خواص الposition

• الfixed: تجعل العنصر مثبت بالنسبة إلى الviewport , بمعنى أنك إن وضعت عنصر مثل الheader فلن يتغير مكانه مهما قمت بعمل scroll
• ال sticky : مثله مثل الfixed ولكن الفرق أنه يكون موجود في مكانه الطبيعي حتى تقوم بعمل scroll وتصل إليه في الviewport ثم يتم تثبيته

ولكن يجب الحرص عند إستخدام الfixed حيث كما قلنا فإن العنصر يثبت في الviewport مما يعني أنه قد يقوم بإخفاء عناصر أخرى

ويجب الحرص أيضاً عند إستخدام الsticky حيث أنه معتمد على العنصر الأب parent element فإن قمت بعمل scroll وذهبت بعيداً عن العنصر الأب , يختفي العنصر الsticky

كلاهما قيم تعطى للخاصية position وتحدد مكان العنصر 

• fixed يكون العنصر ثابتا بالنسبة لنافذة المتصفح
  • لا يؤثر على المساحة المتوفرة للعناصر التي ستليه
  • حتى لو كان العنصر داخل عنصر آخر فإن مكانه سيكون نسبة لنافذة المتصفح
  •  يتم تحديد مكان العنصر عبر القيم top, bottom, right, left

    .class {
    	position: fixed;
    	top: 10px;
    	left: 10px;	
    }
    
    /* أو */
    
    .class {
    	position: fixed;
    	bottom: 50px;
    	right:10px;
    }

     

• sticky يبقى مكان العنصر ثابتا على الشاشة فقط حتى نهاية مساحة التمرير scroll للعنصر الحاوي
  • يشغل العنصر مساحة ويؤثر على مكان العناصر التي ستليه
  • يتم تحديد مكان العنصر بإزاحة من أحد الجوانب عبر القيم top, bottom, right, left

    .class {
    	position: sticky;
    	top: 10px;	
    }
    
    /* أو */
    
    .class {
    	position: sticky;
    	bottom: 10px;
    }
    
    /* أو */
    
    .class {
    	position: sticky;
    	left: 10px;	
    }
    
    /* أو */
    
    .class {
    	position: sticky;
    	right:10px;
    }

     

بالضبط مثل ما تحدث المدربين كلاهما قيمة تعطي لخاصية position في css 

• fixed 

يتم وضعه بالنسبة إلى إطار لعرض (المتصفح) ، يعني أنه يبقى دائماً ثابت في نفس المكان حتى اذا قمت بعمل scroll في الصفحة ويتم استخدام الخواص top, right, bottom, and left في تحديد موضع العنصر .

• sticky 

يتم تثبيت العنصر عندما يصل إلى موضع معين خلال عمل scroll في الصفحة فسيقى العنصر ثابت ، بينما باقي العناصر ستستمر بالتمرير (scroll) أدنى العنصر المثبت ، مثلاً القائمة التي تثبت في راس الصفحة تبقى مثبتة في رأس الصفحة خلال عملية scroll في الصفحة .

يمكنك الاطلاع على المقال الآتي (تحديد مواقع العناصر في CSS باستخدام fixed و sticky) في المقال يتم شرح القيم fixed و sticky بشكل مبسط .