animation bars

بتاريخ 14 ساعة قال Ahmed Ebrahim11:

السلام عليكم 

بعد انقطاع عدت لاكمال موقع كنت اتدرب عليه ظهرت معي بعض المشاكل ارجو المساعده ف حلها

اولا ال navbar به مشكله حيث اضيف له الخاصيه sticky وكن لا تعمل واظن ان هذا بسبب overflow: hidden ف html فما العمل لجعل ال navbar يظهر دائما عند ال scroll كما انه الاحظ وجود خطين ف عناصر ال navbar مع اني عند قسم معين فيجب ان يكون قسم واحد محدد وليس اثنين

ثانيا في قسم about  ال animation bars عند وضع الخاصيه transition فانها لا تعمل كما اني اريدها بشكل معين (اقصد ال bars) فاضع after لعمل مثلث مع ال bars وفوقه الرقم ولكن لم استطع 

salient.zip 12.8 MB · 0 تنزيلات

هل يمكنك صديقي توضيح الأخطاء التي تواجهها بصور؟

قرأت سؤالك واطلعت على الموقع والكود ولم أجد الأخطاء التي تقصدها، كما أن ال navbar في وضعية fixed وثابت عند ال scroll بسبب ال class باسم fixed-top

بتاريخ 18 دقائق مضت قال محمد سعد شحرور:

هل يمكنك صديقي توضيح الأخطاء التي تواجهها بصور؟

قرأت سؤالك واطلعت على الموقع والكود ولم أجد الأخطاء التي تقصدها، كما أن ال navbar في وضعية fixed وثابت عند ال scroll بسبب ال class باسم fixed-top

حسنا استاذي ها هي الصور 

اريد جعل مثلثات كما بالصوره ف نهاية ال bars ولكن لا تظهر عند استخدام after او before

بالنسبه لل navbar كيف يمكن جعله يثبت معي عند ال scroll ولا يختفي اذا نظرت للصورتين ستجد ان ال nav موجود ف احداها وهذا ما اريده

بتاريخ On 28‏/12‏/2023 at 13:03 قال Ahmed Ebrahim11:

حسنا استاذي ها هي الصور 

اريد جعل مثلثات كما بالصوره ف نهاية ال bars ولكن لا تظهر عند استخدام after او before

بالنسبه لل navbar كيف يمكن جعله يثبت معي عند ال scroll ولا يختفي اذا نظرت للصورتين ستجد ان ال nav موجود ف احداها وهذا ما اريده

بالنسبة لشريط التنقل Navbar تستطيع تثبيته أثناء السكرول من خلال خاصية sticky، كالتالي:

.navbar {
  position: sticky;
  top: 0;
}

أما بالنسبة للسؤال الخاص بالمثلثات لم أفهم بالضبط ما تريده.

بتاريخ 26 دقائق مضت قال Mustafa Suleiman:

بالنسبة لشريط التنقل Navbar تستطيع تثبيته أثناء السكرول من خلال خاصية sticky، كالتالي:

.navbar {
  position: sticky;
  top: 0;
}

أما بالنسبة للسؤال الخاص بالمثلثات لم أفهم بالضبط ما تريده.

قمت بتجربتها قبل رفع السؤال 

وعند بحثي عن السبب وجدت ان overflow تعيقها 

ولكن لم تعمل مع ذلك

بالنسبه للمثلثات اريد ان اجعل ال bars تنتهي بشكل مثلث كما بالصوره الثانيه ولكن after و before لم يعملا كما يجب .

الموقع في مجلد المشروع المرفق لديك مختلف تمامًا عن الذي في الصور، أرفق المشروع الذي تعمل عليه حاليًا.

بتاريخ 18 ساعة قال Mustafa Suleiman:

الموقع في مجلد المشروع المرفق لديك مختلف تمامًا عن الذي في الصور، أرفق المشروع الذي تعمل عليه حاليًا.

حسنا استاذي اسف عل الاطاله

portfolio.zip

بتاريخ On 1‏/1‏/2024 at 12:45 قال Ahmed Ebrahim11:

حسنا استاذي اسف عل الاطاله

portfolio.zip 43.11 MB · 8 تنزيلات

عليك إختيار العنصر الصحيح الخاص بالـ navbar أي الذي يحوي الـ navbar:

div.container-fluid.p-0 > div.row {
    position: sticky;
    top: 0;
    z-index: 10;
    opacity: .9;
}

ومن الأفضل تعيين كلاس خاص له لإختياره بشكل أسهل وتجنب مشاكل فيما بعد.