Bootstrap V4.4.1 has a feature where the sticky header disappears after a certain amount of scrolling

I'm facing a challenge in creating a card layout with sticky elements at the top and bottom to display important information and input fields consistently. However, when scrolling through the content within the card, the sticky element at the top disappears, which is not the desired behavior.

Upon investigation, I discovered that removing the card-footer or setting the card height to auto resolves the issue. But maintaining a specific height for positioning on larger screens is necessary, and I cannot remove the footer due to its content.

I attempted moving the sticky elements outside the card-body, but this caused them to get lost on mobile devices when scrolled away.

The solutions I found from other sources were not very applicable as they mainly focused on sticky footers rather than integrating stickiness within a bootstrap card layout.

htmlcssbootstrap-4stickybootstrap-cards

Answer №1

Need to make 2 adjustments...

  • Removed the div under the sticky footer to ensure that the footer remains fixed at the bottom
  • Separated the <form> and .card classes to avoid having a fixed height on the .card which causes the stickiness to be lost, instead keeping the fixed height on the <form>

See the modified snippet below:

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 30px;
  background: red
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  background: lightblue;
}

.the-problem {
  height: 30px
}

.content {
  /* height: 600px; */
  background: gray
}

#thing {
  height: 200px;
  width: 300px;
  overflow: auto;
}

#thing {
  width: 300px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form id="thing">
  <div class='card mt-3'>
    <div class="card-header">An unimportant title</div>
    <div class="card-body p-0" style="overflow: initial">
      <div class="sticky-top">
        sticky-top
      </div>

      <div class="content">
        <p> let the actual content occupy the eeded space... </p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </div>

      <div class="sticky-bottom">
        sticky-bottom
      </div>
      <!--    <div class="card-footer the-problem px-3">    </div> -->
    </div>
  </div>
</form>

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

To make the down arrow image scroll to the end of the page after the 2nd click, simply follow these steps. Initially, the first click

After setting up the image icon and utilizing Javascript and jQuery, I encountered an issue with the down arrow functionality. The first click successfully takes me to the second row grid box downwards, but I am struggling to implement a second click actio ...

jqueryhtml

Utilizing jQuery and Bootstrap CDNs as the source in the index.ejs file

As a beginner in web development, I was tasked with creating a website using node-js & express during my semester. My team and I decided to use a pre-designed website template that included files like bootstrap.min.js, bootstrap.min.css & jquery-2. ...

jquerynode.jsexpressbootstrap-4ejs

Checkbox from Ant Design placed inside a button

As a beginner in React, I am trying to transform an Ant Design Checkbox into a button while maintaining the checkbox functionality. Here is my initial code for the checkbox: import { Checkbox } from "antd"; <div className="modal-body d-flex flex- ...

htmlcssreactjstypescript

Troubles with HTML, CSS, and jQuery Double-Level Menu

After creating a simplified version of an HTML, CSS, jQuery navigation menu, I noticed that the submenu items were being considered part of the containing list item. This caused them to not function as intended when clicked because they were being treated ...

jqueryhtmlcssmenunav

What is the importance of setting height: 0 when flex-basis: 0 is already defined in CSS3 flexbox?

I am currently working on creating a content reader with a fixed size and title that remains visible while scrolling. I attempted to achieve this using CSS3 flexbox with the following structure: .flex { display: flex; flex-direction: column; ...

htmlcssflexbox

cannot establish a connection between details.html and index.html in Django

index.html {% for item in item_list%} <ul> <li> <a href="/foodmenu/{{item.id}}">{{item.id}} -- {{item.item_name}}</a> </li> </ul> {% endfor %} detail.html <h1> ...

pythonhtmldjangodatabase

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

javascripthtmlarraysobjectprinting

`The value of an element within an array changes automatically`

In my current setup, I have a traditional array where each element represents an HTML element. The issue arises when I manipulate these elements within the array; any changes made to the HTML element also reflect in the array automatically. However, I pref ...

javascripthtmlcssarrays

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Inject AJAX response text into a specific div element

I am working on a PHP file that retrieves MySQL results using post information from an AJAX request. The PHP file is set to echo the information from the MySQL table. Now, I need help figuring out how to use JQuery to load this response text into a DIV e ...

phpjavascriptjqueryhtml

Tips on preventing a lone track in Laravel for Server Sent Events

In my Laravel app, I am exploring the use of Server Sent Events. The issue I have encountered is that SSE requires specifying a single URL, like this: var evtSource = new EventSource("sse.php"); However, I want to send events from various parts/controlle ...

javascriptphphtmllaravelserver-sent-events

Updating and transitioning files at regular intervals using Jquery/Javascript

My goal is to create a web page that refreshes and loads different content files every 10 seconds without using an <iframe>. Currently, the files are displaying randomly instead of in order. I am not very familiar with Jquery and Javascript, but I wa ...

javascriptjqueryhtmlcoldfusion

Using Django and jQuery to retrieve a file and display a prompt for downloading the file in the browser

Previously, I had a question about passing files to the browser for download, which was easily achieved by passing strings created at the end of a function to an iframe's src attribute. Now, I have a more complex task at hand – I need to pass pre-e ...

jquerypythonhtmldjango

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

javascripthtmlnode.jsexpressweb-development-server

There seems to be an issue with the Node JavaScript file not updating automatically

Currently facing an issue while trying to develop my first node application. The problem lies with the JavaScript file, as my CSS file is working fine which is causing confusion for me. Here is a snippet of my app.js code: var express = require("express") ...

javascriptcssnode.jsexpress

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...

javascriptphphtmlmysqlajax

The Google map is missing the location icon

window.onload = function initMap() { var styles = [{ "featureType": "water", "stylers": [{ "color": "#2b2b2b" }] }, { "featureType": "landscape", "stylers": [{ "visibility": "on" }, { "color": "#333333" }] ...

javascriptjqueryhtmlgoogle-mapsuser-interface

Retrieve the identifiers of various HTML elements and store them in an array

Within a div, there are multiple objects. I am trying to retrieve the IDs of all elements based on their class, knowing that the number of elements may vary. So far, my attempt has been: arr = $(".listitem #checkBox").hasClass('checkedItem').att ...

javascriptjqueryhtml

maximum distance a button can respond to in a CSS layout

I'm trying to figure out why my CSS button has such a large clickable area. Is there a way to reduce it? When I hover over the button, the clickable area extends beyond the text, which is not ideal. Any suggestions on how to fix this without altering ...

htmlcss

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui