Struggling to get Scrollspy to work with list group in Bootstrap 4, but it's just not cooperating

I'm having trouble with a scrollspy where the elements I am spying on and their content appear separate, instead of being aligned.

#list-example{
  position: relative;
  overflow-y: scroll;
  height: 300px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
    <div id="list-example" class="list-group" >
        <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
        <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
    <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
        <h4 id="list-item-1">Item 1</h4>
        <p>...</p>
        <h4 id="list-item-2">Item 2</h4>
        <p>...</p>
        <h4 id="list-item-3">Item 3</h4>
        <p>...</p>
        <h4 id="list-item-4">Item 4</h4>
        <p>...</p>
    </div>
</div>

Check out this https://codepen.io/ShreyasG/pen/YzqmqMv snippet

javascripttwitter-bootstrapbootstrap-4scrollspy

Answer №1

Check out the following code snippet.

<div class="container-fluid">
<div  class="list-group fixed-top"  data-spy="scroll" data-target="#list-example" data-offset="0">
    <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
    <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div  class="scrollspy-example" id="list-example">
    <h4 id="list-item-1">Item 1</h4>
    <p>...</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>...</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>...</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>...</p>
</div>

Answer №2

Adjust the #list-example class to ".scrollspy-example", and modify the height to 150px.

.scrollspy-example {
  position: relative;
  overflow-y: scroll;
  height: 150px;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="container-fluid">
  <div id="list-example" class="list-group">
    <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
    <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
  </div>
  <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
    <h4 id="list-item-1">Item 1</h4>
    <p>...</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>...</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>...</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>...</p>
  </div>
</div>

Ensure to check it out in Full Page..

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

In the snippet below, you'll find the HTML code that pulls an array of 6 objects from a database and displays them in a Bootstrap row successfully. <div class="row products"> <?php while($product = mysqli_fetch_assoc($featured)) ...

javascriptphpjqueryajaxhtml

Having trouble with the Tooltip feature in Bootstrap versions 5.2 and 5.3 on my end

I've been working on building an HTML website using Bootstrap 5.2, and I followed the instructions in the Bootstrap documentation to add tooltips. However, I encountered an issue where the tooltips were not functioning as expected. When checking the ...

htmljquerycsstwitter-bootstrapbootstrap-5

Tips for tracking advertisement views and saving them in a database

We recently placed our website advertisement on 2 different websites and are interested in tracking the number of clicks or hits we receive from those ads. We would like to store this data in our database. Can anyone suggest a method for accomplishing th ...

javajavascriptweb

avoid saving views in Angular.js

It appears that all of my HTML content is being completely cached in Chrome for some unknown reason. Currently, I am using Angular 1.2 with a .NET Web API 2 project, and the content is being served in index.html. Although I have not made any changes to t ...

javascriptangularjscaching

Switch Object to WebElement or SearchContext in JavaScript

Looking for the best way to convert an Object to WebElement or SearchContext using JavaScript? In Java, casting as `(WebElement)` or `(SearchContext)` works fine. However, attempting the same in JavaScript with `as Webelement` or `as SearchContext` result ...

javascriptselenium-webdriver

Remove a record from the EntityFramework database using ajax

I am a beginner and facing an issue with deleting records from the database using JavaScript, Ajax, and Json in MVC Entity Framework. My delete button seems to be malfunctioning. In my controller class, the action code is as follows: public ActionResult ...

javascriptjqueryasp.net-mvc-3entity-framework-6asp.net-ajax

Displaying threaded discussions in React

Below is an array that contains comments, and I am attempting to display them in a threaded manner by utilizing the parentId property. comments: [ { id: 1, parentId: null }, { id: 2, parentId: 1 }, { id: 3 ...

javascriptrecursionreactjs

"Users have reported that the Express body-parser feature sometimes results in req.body returning

I have developed a basic Express server that utilizes the body-parser module to access POST parameters. Here is how my application is structured: /index.js: 'use strict'; const express = require('express'); const app = express(); con ...

javascriptnode.jsexpressbody-parser

What is the best way to place two radio buttons side by side in a row?

How can I place two radio buttons in a single row with their labels, like the example shown in the picture? ...

htmlcssuser-interfacebootstrap-4

Despite my efforts to include the necessary key, I am still encountering an error with the item list in

Below is an example of a list container: import { List, ListItemText, ListItem } from '@mui/material'; import FooterItem from './FooterItem'; const FooterList = ({ title, items }) => { return ( <List> ...

javascriptreactjslistmaterial-uikey

Building a Laravel Form for Uploading Images in Laravel 5.3

I need help with uploading an image first and getting the image file path before storing all the data, including the image, into a database in LARAVEL. Can someone please advise me on what steps I should take to accomplish this? ...

javascriptphpajaxlaravel

Creating a proxy for an HTTP video stream (from VLC) using NodeJS and ExpressJS

Using VLC 2.2.1, I am able to create an HTTP stream of my webcam from a computer named server. If I open VLC on another computer, client, and enter the network stream http://server:8080, the webcam video displays perfectly. A Wireshark capture of the HTT ...

javascriptnode.jsexpressproxyvlc

Guide to centering a list on a webpage using Bootstrap 3

Looking to create a centered list using the latest version of Bootstrap 3. Any tips? The desired list should be positioned in the middle of the page. ___________________________________________ | | | ...

htmlcsstwitter-bootstrap

"What is the best way to transform tab navigation into a dropdown menu with the help

I have a collection of tabs currently on display. I am looking to transform them into a dropdown menu when the screen size changes, making them more responsive. Each set of tabs corresponds to different content. Despite trying various solutions found on s ...

javascriptjqueryhtml

The ID is specifically assigned to the anchor element produced by React Bootstrap, rather than the surrounding div

Previously, I utilized the 'ml-auto' class in my navbar to push the dropdown all the way to the left. However, I encountered a problem when the screen size decreased and the navbar orientation changed to vertical. To address this issue, I attemp ...

reactjsbootstrap-4next.jsreact-bootstrap

Issue: nodebuffer is incompatible with this platform

Currently, I am attempting to utilize the Shpjs package in order to import a Shape file onto a Leaflet map. According to the Shpjs documentation: shpjs Below is the code snippet I am working with: const [geoData, setGeoData] = useState(null); //stat ...

javascriptreactjsgeojsonshapefilereact-leaflet

Challenge encountered while adding child nodes to jqtree following a successful ajax call

Having some trouble with adding child nodes to the tree. The situation is this: I need to load tree nodes when clicking on a node arrow using an ajax call. Initially, I am passing only the root level nodes to the tree and everything works fine. However, wh ...

javascriptjqueryajaxtreejqtree

Setting a timezone for every request in Node.js based on a specific post parameter

I have developed a REST application using Node.js Express and now I aim to expand its reach to different countries. One hurdle I am facing is that all my date and time operations are currently based on the local timezone, which could pose an issue if reque ...

javascriptnode.jsdatetimeexpress

What steps can I take to stop Node.js from caching 'require' module executions?

After researching, I've come to understand that the require function automatically executes and parses the functions in the module. Is there a way to prevent this automatic execution? Here's the scenario: In order to avoid having an excessively ...

javascriptnode.jsexpressasync-awaitknex.js

Using jQuery's .each() method to iterate over a JSON object may only display the

Running into some trouble with jQuery.each(). I'm pulling JSON data from another PHP file and trying to display a specific key value from it. This is the JavaScript code I have: <div class="row" id="fetchmember"> <script type="text/javasc ...

javascriptjqueryjsononchangeeach