اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

عندما نريد تخصيص شكل ل القائمة العلوية نقوم بذلك عند كلاس navbar 

داخل ملف posts.css طبقي الكود التالي في السطر 11

nav.navbar {
    z-index: 15;
    background-color: white; //نطبق لون للخلفية
    border-bottom: black 1px solid; //هنا نضع حافة نحدد لونها وسماكتها ونوعها
}

 

  • 0
نشر
بتاريخ 12 دقائق مضت قال Nour Al Sabbagh:

لا مش كدا انا عيزة عندما انزل في الصفحة تظهر background بيضاء و نوع السماكة اعتقد هناك خطأ في js

الدوال التي تستخدميها تتعلق بمكتبة jquery  لذلك عليك تضمين مكتبة jquery ، يمكنك تضمينها بهذا الشكل

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

ملاحظة يجب وضعه قبل تضمين Bootstrap ، هكذا 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/index.js"></script>

وبعدها قومي بوضع الخلفية المناسبة ، أنتِ هنا تستخدمين كلاس noTransparrent

قومي باستخدام الدالة بهذا الشكل وأتوقع سوف تنجح القائمة لديكِ

 $(window).scroll(function () {
        if ($(window).scrollTop() > 400) {
            $("#navBar").css("background-color","black");
        } else {
            $("#navBar").css("background-color","rgba(16, 22, 54, 0.2)");
        }
    });

 

  • 0
نشر

سبب المشكة أنكي لاتستدعين مكتبة jQuery داخل ملفات html 

قوم بوضع هذا الوسم في نهاية <body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

أي تحت هذا السطر

      <!--  Bootstrap Bundle with Popper -->

هكذا سوف تقومين بتحميل مكتبة jQuery وبالتالي إستخدامها في ال navbar

  • 0
نشر
بتاريخ 5 دقائق مضت قال Nour Al Sabbagh:

ما فيش حل تاني بدون تحميل مكتبة jquery؟

يوجد طريقة أخرى من دون jQuery 

قومي بإستبدال الكود داخل index.js بالكود التالي

var scrollPosition = window.scrollY;//هنا قمنا بتحديد جهة السكرول
var logoContainer = document.getElementById("navBar") // حددنا العنصر الذي نريده بواسطة الأي دي الخاص به

window.addEventListener('scroll', function() { //وضعنا متنصت على حدث السكرول

    scrollPosition = window.scrollY;

    if (scrollPosition >= 30) {
        logoContainer.classList.add('noTransparrent');//هنا نضيف الكلاس
    } else {
        logoContainer.classList.remove('noTransparrent'); //هنا نحذف الكلاس
    }

});

 

  • 0
نشر
بتاريخ 4 دقائق مضت قال Nour Al Sabbagh:

ما فيش حل تاني بدون تحميل مكتبة jquery؟

أرى أن مكتبة jquery هي الحل الأنسب لهذه التنسيقات ، هي تنفذ بهذه الطريقة في أغلب الموقع . لا يوجد مشاكل في تحميل مكتبة jquery حيث تعتبر مهمة في تصميم المواقع لأنها تضيف أشياء جميلة للموقع . يمكنك النظر على هذه المقالات حول ما تفعله مكتبة jquery في الموقع . إن كنتي لن تستخدمي jquery سوف تقومين باستخدام لغة الجافا سكربت بعدة أكواد . لكن jquery تسهل الأمر بدوالها البسيطة . 

  • 0
نشر
بتاريخ 1 دقيقة مضت قال أسامة زيادة:

أرى أن مكتبة jquery هي الحل الأنسب لهذه التنسيقات ، هي تنفذ بهذه الطريقة في أغلب الموقع . لا يوجد مشاكل في تحميل مكتبة jquery حيث تعتبر مهمة في تصميم المواقع لأنها تضيف أشياء جميلة للموقع . يمكنك النظر على هذه المقالات حول ما تفعله مكتبة jquery في الموقع . إن كنتي لن تستخدمي jquery سوف تقومين باستخدام لغة الجافا سكربت بعدة أكواد . لكن jquery تسهل الأمر بدوالها البسيطة . 

شكرا" كثيرا" اعلم ذلك لكن العميل لا يريد تدخل jquery و شكرا" مرة أخرى

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...