Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down?

Dealing with this responsively can be challenging, so what alternative solutions exist for achieving this effect?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b3bebea5a2a5a3b0a191e4ffe2ffe3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="row mb-5 p-4 pb-0 pe-lg-0 pt-lg-5r">
  <div class="col-4 py-5 px-5">
    <div class="card" id="scrollSpyList">
      <div class="card-header">
        Header
      </div>
      <div class="card-body subheader">
        Category 1
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#item2">Item 2</a>
        <a class="list-group-item list-group-item-action" href="#item3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#item4">Item 4</a>
      </ul>
      <div class="card-body subheader">
        Category 2
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item5">Item 5</a>
        <a class="list-group-item list-group-item-action" href="#item6">Item 6</a>
      </ul>
      <div class="card-body subheader">
        Category 3
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item7">Item 7</a>
        <a class="list-group-item list-group-item-action" href="#item8">Item 8</a>
      </ul>
    </div>
  </div>
  
  <div class="col-8 py-5 px-5" data-bs-spy="scroll" data-bs-target="#scrollSpyList" data-bs-smooth-scroll="true" tabindex="0">
    <h2 class="mb-5 text-uppercase" id="item1">Item 1</h2>
    <p class="lead">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat massa id feugiat suscipit. Maecenas ultricies pellentesque risus, at placerat augue efficitur eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
      cubilia curae; Mauris vel nisl finibus, dapibus est eget, efficitur lacus. Donec et pharetra mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porttitor vehicula mi, sit amet bibendum
      ligula suscipit sit amet. Nam iaculis tellus nisi, vitae pulvinar justo suscipit sed. In interdum mollis libero, at pretium ante pretium vitae. Donec posuere venenatis mauris tempus varius. Nullam cursus iaculis lacus, non tincidunt tortor varius
      ut.
    </p>

    <h2 class="my-5 text-uppercase" id="item2">Item 2</h2>
    <p class="lead">
      Aenean porttitor sollicitudin neque ac lacinia. Vestibulum pharetra nulla a augue venenatis blandit sed sed ipsum. Pellentesque dictum lacus ac turpis feugiat sollicitudin. Sed consequat eros at lacus volutpat gravida. Vestibulum ante ipsum primis in
      faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum facilisis sem dui, ut mattis lacus commodo sit amet. Nulla id vehicula purus. Fusce at nisl bibendum, viverra urna in, rutrum augue. Phasellus malesuada iaculis bibendum. Cras ex
      urna, gravida eget nibh non, consectetur ultrices ligula. Mauris sit amet libero interdum, imperdiet odio sit amet, volutpat mauris. Nulla molestie consequat mauris, nec pretium dui sollicitudin eu. Sed non blandit nisl. Etiam tempor nunc at porttitor
      egestas. Sed gravida eget erat nec scelerisque. Fusce mattis mauris at faucibus congue. Sed sodales consequat felis, ut tristique est sagittis sed. Praesent nibh neque, posuere nec purus ac, convallis varius velit. Duis molestie viverra metus vitae
      fringilla. Aliquam consequat blandit massa. Pellentesque auctor aliquet pretium. Suspendisse ut massa vel risus maximus molestie.
    </p>

    <h2 class="my-5 text-uppercase" id="item3">Item 3</h2>
    <p class="lead">
      Nullam lacinia tellus at elit laoreet, non condimentum nisl sodales. Nullam velit nisi, interdum at purus eu, lacinia facilisis felis. Mauris imperdiet imperdiet nibh, vitae placerat elit fermentum interdum. Morbi cursus non ex non sodales. Nunc sed molestie
      libero, a luctus mi. Vivamus maximus velit facilisis porttitor hendrerit. Duis nulla sem, suscipit sed posuere ut, mollis eget turpis. In at porta purus, in facilisis urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc mauris libero, convallis vitae tincidunt non, ornare a eros. Praesent lobortis ipsum eget nibh feugiat sollicitudin. In condimentum
      eros odio, in imperdiet ante lobortis sed. Vestibulum purus erat, pellentesque eu pulvinar non, tempor sed sapien. Phasellus vel nunc id orci venenatis luctus sed eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos.
    </p>

    <h2 class="my-5 text-uppercase" id="item4">Item 4</h2>
    <p class="lead">
      Nullam non nibh sed arcu eleifend aliquam eu ac purus. Sed lobortis vel lacus a porta. Donec in consectetur nisl. Suspendisse faucibus elit ac rutrum convallis. Proin mattis ante ut diam commodo egestas. Cras consequat luctus orci, scelerisque scelerisque
      purus pretium eu. Nullam erat eros, gravida sit amet eros id, mattis tempus lacus.
    </p>
    <hr class="my-5" style="width: 100%;" />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141342f322f33">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

When it comes to positioning elements on a webpage, the sticky-top class in Bootstrap is a good start. However, for more precise alignment, you may need to delve into custom scripting.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e85988599">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="row mb-5 p-4 pb-0 pe-lg-0 pt-lg-5r">
  <div class="col-4 py-5 px-5">
    <div class="card sticky-top" id="scrollSpyList">
      <div class="card-header">
        Header
      </div>
      <div class="card-body subheader">
        Category 1
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#item2">Item 2</a>
        <a class="list-group-item list-group-item-action" href="#item3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#item4">Item 4</a>
      </ul>
      <div class="card-body subheader">
        Category 2
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item5">Item 5</a>
        <a class="list-group-item list-group-item-action" href="#item6">Item 6</a>
      </ul>
      <div class="card-body subheader">
        Category 3
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item7">Item 7</a>
        <a class="list-group-item list-group-item-action" href="#item8">Item 8</a>
      </ul>
    </div>
  </div>
  
  <div class="col-8 py-5 px-5" data-bs-spy="scroll" data-bs-target="#scrollSpyList" data-bs-smooth-scroll="true" tabindex="0">
    <h2 class="mb-5 text-uppercase" id="item1">Item 1</h2>
    <p class="lead">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </p>

    <h2 class="my-5 text-uppercase" id="item2">Item 2</h2>
    <p class="lead">
      Aenean porttitor sollicitudin neque ac lacinia...
    </p>

    <h2 class="my-5 text-uppercase" id="item3">Item 3</h2>
    <p class="lead">
      Nullam lacinia tellus at elit laoreet, non condimentum nisl sodales...
    </p>

    <h2 class="my-5 text-uppercase" id="item4">Item 4</h2>
    <p class="lead">
      Nullam non nibh sed arcu eleifend aliquam eu ac purus...
    </p>
    <hr class="my-5" style="width: 100%;" />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555203b263b27">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

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

Position the scroll down arrow at the center bottom of a full-screen div using WPBakery Visual Composer

I have a series of full-screen sections in Visual Composer and I am trying to add an arrow at the bottom of each one to indicate to users that they should scroll for more content. However, my attempts with absolute positioning on the divs containing the ic ...

csswordpressvisual-composerwpbakery

Encountering the error message "Unable to access property 'addEventListener' of null while trying to manipulate innerHTML"

Currently, I am utilizing innerHTML to include certain elements and a wrapper around them. for (i = 0; i < arr.length; i++) { b.innerHTML += "<div class='wrapper'><div class='col-4'>" + arr[i].storeID + "</div> ...

javascripthtml

The span exits the external div only once the animation has concluded

I utilized jQuery to create an animation effect: http://jsfiddle.net/rxCDU/ UPDATE: Please note that this effect is optimized for Chrome browsers! The animation works correctly, however, the green SPAN element moves out of the red DIV only after the ani ...

jquerycssanimationjquery-animate

What is the best way to display data from an Excel spreadsheet on my website?

I'm faced with a challenge in my Excel spreadsheet- I have a mix of numbers and text that I want to turn into graphical representations on a webpage. I'm considering using Python or PHP to achieve this as HTML alone doesn't seem up to the ta ...

pythonphphtml

PHP: Sending multiple values under a single name

Here's the code I'm currently working with. It includes a form with 6 inputs. The last 3 inputs are named firstanswer, secondanswer, and thirdanswer. <form action="addsurvey.php" method="post"> <input type="text" name="surveyname"> ...

phphtmlarraysinput

JavaScript application that features an audio player complete with a dynamic progress bar and customizable tags

Looking to create a custom audio player using HTML, CSS, and JS. The player should have basic functionality like a play button and progress bar. However, I want to allow users to add tags on the progress bar of the audio file, similar to how SoundCloud&apo ...

javascripthtmlcss

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

phpjavascripthtmlajaxforms

New button attribute incorporated in AJAX response automatically

data-original-text is automatically added in ajax success. Here is my code before: <button type="submit" disabled class="btn btn-primary btn-lg btn-block loader" id="idBtn">Verify</button> $(document).on("sub ...

javascripthtmljquerycssajax

What is preventing Facebook from merging its CSS/JS files together?

I wonder about the reasoning behind Facebook developers' decision not to consolidate their scripts and stylesheets into single files, opting instead to load them on demand through their CDN. Considering the complexity of Facebook as an application, I ...

javascriptcssperformancefacebookcdn

I am currently working on making my social items more responsive, however, I am encountering some issues. Any ideas or suggestions on how to resolve this

Find my resume project on GitHub at https://faizan-ul-hasnain.github.io/Resume-Project-/ and let me know how to improve it. Visit my resume project here ...

htmlcss

Steps for accessing a particular tab on a separate webpage

I am working on a home page that includes an IFrame displaying a separate HTML page. Within the embedded page, there is a link that, when clicked, should open another page in the same IFrame with a specified tab displayed. This new page contains 3 tabs, ...

htmltabs

Safari is unable to display the button text, while Chrome has no problem showing it

In Safari, the text of the button is not showing up properly. I am able to retrieve the text using jQuery in the console though. However, there seems to be an issue with recognizing the click event. <div class="btn-group btn-group-lg"> <button ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble retrieving the routeName as it consistently returns empty

I attempted to extract the routeName from the URL in order to apply a different class to the body's layout when on the /Category page. https://i.stack.imgur.com/J0hsp.png @{string classContent = Request.QueryString["routeName"] != "/ ...

htmlcssasp.net

Are Your Padding Styles Missing?

I've noticed that the text under the photos on this page in the main section (a.event) is not displaying the 5px padding top and bottom. Any suggestions for fixing this? Thank you! =) a.event { width:315px; height:auto; border:0; padding: 5px 0; } ...

csswordpresspadding

Use jQuery to parse the JSON below and then showcase the information in an HTML table

Can anyone assist me with parsing the following JSON using jQuery and presenting it in an HTML table? I want to showcase the values of "key" and "doc_count" in an HTML table. Your help would be greatly appreciated. Please find the JSON data below: { ...

javascriptjqueryhtmljson

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

jqueryhtmlcssnavigation

Showing a div above another div without relying on z-index

I have designed custom drop down menus that consist of one <div> containing the current value and functioning as a <select> field, with another <div> below it that appears when the top one is clicked, displaying all the <option> val ...

htmlcssdrop-down-menuz-indexoverlap

The effectiveness of border-radius is limited to only one side of the div

After experimenting with applying the border-radius property to a div, I encountered an issue where the border radius only worked on one side when the radius value was too large. How can I resolve this problem while maintaining the border-radius value on a ...

htmlcssborderborder-radius

What is the best way to integrate a CSS designed flag in my website's top navigation bar?

My goal is to make my website multilingual, allowing users to switch between languages using flags in a dropdown menu. Initially, I tried creating the flag images solely with CSS for better resizing ability but faced difficulties. So, I resorted to using s ...

htmlcss

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

htmlcssreactjsfrontendtailwind-css