Sticky positioning and outline effects

I have been working on creating a scrollable list with "sticky" headers. The functionality seems to be in place, but there are some visual glitches that I've encountered.

The list itself is structured using a ul element styled with the Bootstrap 5 class list-group. In its initial state, it appears like this:

https://i.sstatic.net/Bhg3t.png

Upon scrolling, the two levels of headers stick as expected:

https://i.sstatic.net/UV6Iv.png

https://i.sstatic.net/8pQbY.png

The screenshots reveal that the border between the stuck headers disappears. This seems to be default behavior in browsers, which doesn't particularly bother me. However, when further scrolling causes the second "First Level" header to stick, the behavior becomes inconsistent. The top border vanishes, and a new border separates the two stuck headers instead:

https://i.sstatic.net/pI7m1.png

If I continue scrolling, the issue persists:

https://i.sstatic.net/P3GJ1.png

You can access the full source code at: JSFiddle

I'm uncertain if this behavior is intended or if there's a way to resolve it. Any insights would be appreciated!

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

The main issue at hand is that only the first .list-group-item is displaying a top border.

To fix this, simply include .border-top to each of your .sticky-* elements.

<li class="list-group-item sticky-top sticky-first border-top">...</li>

https://jsfiddle.net/krxfsgp9/

Alternatively...

If you are utilizing SASS, you can extend both .border-top and .sticky-top in your custom class definitions.

        .sticky-first, 
        .sticky-second {
            @extend .sticky-top;
            @extend .border-top;
            top: 0;
        }

        .sticky-second {
            top: 41px;
        }

Then implement it like this:

<li class="list-group-item sticky-first">...</li>
<li class="list-group-item sticky-second">...</li>

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

How to adjust the background picture opacity in HTML

Is it possible to adjust the transparency of a background image in HTML? I came across one solution that involved adding a box on top of the background picture and changing the opacity of the box, which in turn changed the opacity of the background pictur ...

htmlbackground-imageopacity

Navigating through HTML content and extracting specific elements

After using an ajax call to retrieve the partialView HTML of a page, I need to extract information from the main div before displaying it. This data specifically relates to the size information in order to create a floating window. Here is the code snippe ...

javascriptjqueryhtmlajax

Reorganize items that extend beyond the list into the next column using Bootstrap

I have a row with two columns, where Column 1 currently contains 7 list items under the ul tag. However, I want to display only 5 list items in Column 1 and automatically move the remaining items to the next column (i.e., Column 2). Is there a way to ach ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What steps do I need to take to extract the date and month from a single datepicker using the code below?

<div class="col-md-3 pull-left" style="padding:9px"> <input type="text" id="datepicker" class="form-control"> </div> The HTML and C ...

javascriptc#htmlcssasp.net-core

How can we determine the total character count of a file that has been loaded into a textarea

I have a textarea where I can count the number of characters as I type. function calculateCharacters(obj){ document.getElementById('numberCount').innerHTML = obj.value.length; } <textarea name="textField" id="my_textarea" class="text_edit ...

javascripthtmlfile-uploadtext-editorcounting

What is the best way to align my clip-path's text with the center of the viewport and ensure that all of the clip-path's text is visible?

Check out my React component demo: https://codesandbox.io/s/epic-brown-osiq1. I am currently utilizing the values of viewBox, getBBox, and getBoundingClientRect() to perform calculations for positioning elements. At the moment, I have hardcoded some values ...

javascripthtmlcssreactjssvg

In a designated paragraph, set the display of all <span> elements to none using JavaScript

I have a long paragraph with over 10,000 lines of text and I need a way to quickly remove all the lines without hiding the entire paragraph. Specifically, I want to hide each line individually by changing the span style from "display:block" to "display:non ...

javascripthtml

Is there a way to show escaped html code on the blog editing page?

After developing a Content Management System (CMS), I encountered an issue with code formatting in my blog posts. <pre> <code> &lt;input type=&quot;color&quot; name=&quot;favcolor&quot; /&gt; </code> < ...

phphtmlmysql

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

As I delved into a tutorial on MDN, an intriguing code snippet caught my attention: /* weight: 0015 */ div div li:nth-child(2) a:hover { border: 10px solid black; } An unanswered question lingers in my mind: Why does this rule's specificity displa ...

htmlcsspseudo-classcss-specificity

Integrate new functionality into the plugin's JavaScript code without directly editing the JS file

I need to incorporate a new function called 'setInputDataId' at the same level as the existing function '_select' in the plugin js file without directly modifying the file itself. I am seeking guidance on how to add this new function. ...

javascriptjquerytwitter-bootstrapjquery-pluginstwitter-bootstrap-3

Use PHP to highlight the row that has been selected in an HTML table

I am currently working on a project where I have styled multiple HTML tables on my website using alternating gray and white bands. Now, my goal is to highlight the selected row in a darker shade of gray. I have experimented with various solutions, and the ...

javascriptphpjqueryhtmlcss

Tips for maintaining the dropdown selection when new rows or columns are added to a table

I have a task requirement where I must generate a dynamic table using jQuery. I've successfully implemented adding dynamic columns or rows to the table. Feel free to check out the fiddle code here. HTML: <div id='input_div' name='i ...

javascriptjqueryhtml

Obtaining the source id using HTML5 Drag & Drop functionality

Is there a way to retrieve the id of the div I am dragging from, similar to how it is demonstrated here? Your insights are greatly appreciated. Thank you. ...

html

Getting rid of background color in a tooltip using Material UI

I'm currently tackling an issue with Material UI's tooltip. I can't seem to find a way to make the background of the tooltip completely transparent. By default, it displays with a grey background and white text. Changing the background color ...

javascriptcssreactjsmaterial-ui

Is there a way for me to adjust my for loop so that it showcases my dynamic divs in a bootstrap col-md-6 grid layout?

Currently, the JSON data is appended to a wrapper, but the output shows 10 sections with 10 rows instead of having all divs nested inside one section tag and separated into 5 rows. I can see the dynamically created elements when inspecting the page, but th ...

javascriptjqueryjsonajaxtwitter-bootstrap

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

cssmaterial-ui

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

javascriptjquerycsstwitter-bootstrap

adjust the size of the textarea to perfectly fill the available space

I want my textarea within the wrapctxt container to always fill up the remaining space below the wrapctop section, reaching the bottom of the wrapc element. .panelb{ display:grid; grid-template-columns: 130px 34% auto; height:100vh; width: ...

htmlcssgrid

The art of analyzing HTML using either jquery or php

I have a question regarding HTML coding. Can anyone help me solve the following example? Here is a snippet of my HTML site: <div> <p><strong>Title 1</strong></p> <p>Content 1</p> <p>Content 2< ...

phpjqueryhtml

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor