Bootstrap

Bootstrap 4 Scrollspy

ستتعلم في هذا الدرس ال Scrollspy وهو يحدث الروابط تلقائيًا في ال Navbar بناءً على مكان ال Scroll في الصفحة بواسطة ال Bootstrap 

التاريخ

07 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1058

المواضيع

6
chevron_right التالى
92%
السابق chevron_left
الشروحات chevron_left Bootstrap 4 Scrollspy chevron_left Bootstrap
BootStrap Basics keyboard_arrow_down
     check_circle_outline 1 - BootStrap Introduction
BootStrap Division keyboard_arrow_down
     check_circle_outline 2 - Bootstrap Containers
     check_circle_outline 3 - Bootstrap Grids
BootStrap Typography keyboard_arrow_down
     check_circle_outline 4 - BootStrap Typography
BS Base CSS keyboard_arrow_down
     check_circle_outline 5 - Bootstrap Colors
     check_circle_outline 6 - Bootstrap Buttons
     check_circle_outline 7 - Bootstrap Button Groups
     check_circle_outline 8 - Bootstrap Tables
     check_circle_outline 9 - Bootstrap Images
     check_circle_outline 10 - Bootstrap Alerts
     check_circle_outline 11 - Bootstrap Progress Bars
     check_circle_outline 12 - Bootstrap Spinners
     check_circle_outline 13 - Bootstrap Jumbotron
     check_circle_outline 14 - Bootstrap Badges
     check_circle_outline 15 - Bootstrap Pagination
     check_circle_outline 16 - Bootstrap List Groups
     check_circle_outline 17 - Bootstrap Cards
     check_circle_outline 18 - Bootstrap Forms
     check_circle_outline 19 - Bootstrap Inputs
     check_circle_outline 20 - Bootstrap Utilities
     check_circle_outline 22 - Bootstrap Flex
BS JavaScript keyboard_arrow_down
     check_circle_outline 21 - Bootstrap Dropdowns
     check_circle_outline 23 - Bootstrap Collapse
     check_circle_outline 24 - Bootstrap Navs
     check_circle_outline 25 - Bootstrap Tabs
     check_circle_outline 26 - Bootstrap Navbar
     check_circle_outline 27 - Bootstrap Carousel
     check_circle_outline 28 - Bootstrap Modal
     check_circle_outline 29 - Bootstrap Tooltip
     check_circle_outline 30 - Bootstrap Popover
     check_circle_outline 31 - Bootstrap Toast
     check_circle 32 - Bootstrap Scrollspy
     check_circle_outline 33 - Bootstrap Icons
     check_circle_outline 34 - Bootstrap Media Objects

Bootstrap 4 Scrollspy

share

</> Bootstrap 4 Scrollspy

يستخدم ال Bootstrap Scrollspy لتحديث الروابط تلقائيًا في ال Navbar بناءً على مكان ال Scroll في الصفحة

طريقة انشاء ال Scrollspy

  • اضف data-spy=scroll الي ال Element الذي نظهر بداخله ال scroll bar وهو ال body Element
  • نقوم بإضافة data-target attribute متبوعة بالقيمة ال ID او ال Class لل body
  • نقوم بأنشاء روابط منفصلة لل navbar
  • نقوم بأنشاء مجموعو من ال div لعمل المحتوي الزي يظهر عندما يتم تحريك ال scroll
  • نقوم بربط عناصر المحتوي بال links عن طريق إضافة id لكل Element به محتوي ونضع بداخل ال links خاصية href attribute بداخلها نفس ال id

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

ال CSS position Property اجباري مع ال Element الزي نقوم باضافة ال data-spy=scroll ليعمل ال scrollspy بشكل صحيح

share

</> Scrollspy Vertical Menu

في هذا المثال طريقة عمل ال Scrollspy بشكل رأسي بداخل ال navbar

 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Section 1</a>
          </li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the menu while scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body>
جربها بنفسك chevron_right
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات
chevron_right التالى
السابق chevron_left

CLOSETAG CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

الشروحات

HTML

CSS

JavaScript

Git

الدورات

لا يوجد

قانوني

الأحكام والشروط

اتفاقية الترخيص

سياسة الخصوصية

معلومات حقوق النشر

سياسة ملفات الارتباط

الدعم

ساهم بمحتواك

أسئلة وأجوبة

اتصل بنا

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة

CLOSETAG