Bootstrap 4 Tutorial

BS4 Scrollspy

Last modified on: October 26, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Bootstrap 4 Scrollspy is a feature that automatically updates navigation links based on the user&rsquo;s scroll position on the page. It&rsquo;s useful for single-page websites or pages with sections, enabling users to quickly see which section they are viewing.</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="d050f592-23b8-4e28-86cd-134ceb5bfda5" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light"><hr />
<h1>Bootstrap 4 Scrollspy</h1>
<h2>Overview</h2>
<p>Scrollspy monitors the scrolling position and updates navigation items based on the section currently in view. It works with Bootstrap's navbar or list groups and requires an additional JavaScript component to function.</p>
<h2>Basic Scrollspy Structure</h2>
<h3>HTML Structure with Scrollspy</h3>
<p>To set up Scrollspy, assign the <code>data-spy="scroll"</code> attribute to the <code>body</code> tag and set a <code>data-target</code> attribute with the selector for the navigation menu. Each section of the page should have a unique <code>id</code> that matches the href of the navigation link.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- Navbar for Scrollspy --&gt;
&lt;nav id="navbar-example" class="navbar navbar-light bg-light fixed-top"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Scrollspy&lt;/a&gt;
    &lt;ul class="nav nav-pills"&gt;
        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#section1"&gt;Section 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#section2"&gt;Section 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#section3"&gt;Section 3&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Complete Example: Bootstrap 4 Scrollspy</h2>
<p>Here&rsquo;s a complete example demonstrating Bootstrap 4 Scrollspy. The sections become highlighted in the navbar as you scroll.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 4 Scrollspy Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
    &lt;style&gt;
        /* Set height for sections to make scrolling visible */
        .section {
            height: 600px;
            padding-top: 60px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body data-spy="scroll" data-target="#navbar-example" data-offset="70"&gt;

&lt;!-- Navbar for Scrollspy --&gt;
    &lt;nav id="navbar-example" class="navbar navbar-light bg-light fixed-top"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Scrollspy Example&lt;/a&gt;
        &lt;ul class="nav nav-pills"&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#section1"&gt;Section 1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#section2"&gt;Section 2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#section3"&gt;Section 3&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;

&lt;!-- Content Sections --&gt;
    &lt;div id="section1" class="section bg-primary text-white"&gt;
        &lt;h2&gt;Section 1&lt;/h2&gt;
        &lt;p&gt;This is Section 1 content.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="section2" class="section bg-secondary text-white"&gt;
        &lt;h2&gt;Section 2&lt;/h2&gt;
        &lt;p&gt;This is Section 2 content.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="section3" class="section bg-success text-white"&gt;
        &lt;h2&gt;Section 3&lt;/h2&gt;
        &lt;p&gt;This is Section 3 content.&lt;/p&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More