Maintain a sticky position with a set minimum distance from the bottom of the container

How can I position content in a container with some minimum distance to the bottom? Specifically, I want the blue element to stop before reaching the very bottom of the container.

I could stack two containers on top of each other and only include the sticky content in the first one. However, since the container may expand with user interaction, this approach is not feasible as I need the sticky content to scroll further over the 'new' content.

In essence, I require the sticky content to maintain a minimum distance from the bottom of the container at all times. Is there an elegant way to achieve this?

Initially, I thought adding the bottom attribute to the element might work, but it did not have the desired effect. I also experimented with a JavaScript solution that involved switching between sticky and absolute positioning based on the user's scroll position, but this proved ineffective.

Any assistance or guidance on this matter would be greatly appreciated.

body{
  min-height:2000px;
}
.content{
  width:300px;
  background:red;
  margin-top:20px;
}
.overlayContent{
  width:100%;
  min-height:100px;
  padding:10px;
  background:blue;
  position:sticky;
  top:0;
  bottom:20px;
  z-index:999;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242372c322c33">[email protected]</a>/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d7dadac1c6c1c7d4c5f5809b859b84">[email protected]</a>/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>
<body>
  <div class="content">
    <div class="overlayContent">
          
    </div>
    <p class="mt-16">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante enim, maximus vitae rutrum eu, ultrices ac mauris. In ac libero nisi. Suspendisse vel dictum purus. Etiam in orci orci. Donec tincidunt turpis a justo consequat, eu sodales lorem ultrices. Suspendisse dictum massa vitae elementum fringilla. Fusce est sapien, faucibus ut ultricies eget, ultrices sed turpis. Praesent ac lectus eget eros fringilla aliquam.
      
    <a class="btn btn-primary w-100" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Expand
          </a>
        ...
    </body>

javascriptcsscss-positionsticky

Answer №1

If I have a correct understanding of the situation, it seems like the blue box should come to a stop before reaching the button. Kindly let me know if my interpretation is incorrect.

* {border:medium none; margin:0; padding:0;}
*:hover, *:active, *:focus {outline:none !important;}
html {height:100%;}
body{
  padding:0 0 20px;
  min-height:2000px;
  display:flex;
  flex-flow:row nowrap;
}
.content{
  width:300px;
  background:red;
  margin-top:20px;
}
.overlayContent{
  width:300px;
  min-height:100px;
  padding:10px;
  background:blue;
  position:sticky;
  top:0;
  bottom:20px;
  z-index:999;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="format-detection" content="telephone=no" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5908b958b94">[email protected]</a>/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa4baa5">[email protected]</a>/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>
<body>
  
  <div class="content">
    <div class="overlayContent">

    </div>
        
        <p class="mt-16">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante enim, maximus vitae rutrum eu, ultrices ac mauris. In ac libero nisi. Suspendisse vel dictum purus. Etiam in orci orci. Donec tincidunt turpis a justo consequat, eu sodales lorem ultrices. Suspendisse dictum massa vitae elementum fringilla. Fusce est sapien, faucibus ut ultricies eget, ultrices sed turpis. Praesent ac lectus eget eros fringilla aliquam.</p>
        
    <a class="btn btn-primary w-100" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Expand
    </a>

        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
            Some content to make the original content container a bit larger.
          </div>
        </div>
  </div>
</body>
</html>

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

Determine the id of every element when scrolling to the top in an Angular application

I am searching for a way to retrieve the id of the section element when it reaches the top. A similar task has been accomplished using jQuery on Stack Overflow, but I am looking to achieve the same with Angular. I have tried a similar approach but without ...

javascripthtmlcssangulartypescript

The paintbrush is whimsically altering its style on the canvas

My checkerboard has a unique feature where hovering over a tile will highlight it in yellow. Surprisingly, this action also turns the game border and the last white checker's border yellow as well. What's puzzling is that I never specified for t ...

javascripthtml

What could be causing the hang when attempting to insert a script using Bookshelf.js?

Can anyone help me understand why the Node.js script refuses to exit? // myscript.js var Model = bookshelf.Model.extend({ tableName: 'models' }); var m = Model.forge({name: 'hello'}); m.save(); console.log("End"); Even after running ...

javascriptnode.jsbookshelf.jsknex.js

Guide to extracting a string from the database and converting it into an XML format using AngularJS

From the database, I retrieve a string containing XML data. var svgString = ' <defs> <clipPath id="path-print-area-path"> <path d="M767.5,474.5h-575a50,50,0,0,1-50-50V99.5a50,50,0,0,1,50-50h575a50,50,0,0,1,50,50v325A50,50,0,0,1,7 ...

javascriptangularjsxmlsvg

What steps are needed to set up my Express server so that it can render all my content, rather than just my HTML file?

I need help setting up a server for my project using Express. Here is the structure of my file directory: root-directory ├── public │ ├── css │ │ └── styles.css │ ├── images │ │ └── img1.png | | └ ...

javascriptexpressserverfilepath

Using jQuery to append a string to a CSS property

My current task involves modifying a series of divs with background images named Look-1.jpg to Look-6.jpg. I am looking to add "-cut" to all of them simultaneously to transform them into Look-6-cut.jpg. I have two collections of background images and I ai ...

jqueryhtmlcssbackground

Where is this mysterious negative position originating from in Firebug?

I'm dealing with an element that has the following CSS attributes: .myElem { position: absolute; width: 100%; top: 25px; height: 6px; padding: 1px 0px; } Can someone please take a look at this screenshot I uploaded? When checking the layou ...

firefoxfirebugcss

Using the jQuery each loop with Waypoints

Having trouble with the $.each() function in Waypoints and could use some assistance. I've checked other Stack Overflow posts using the same method but still can't seem to get it working properly. You can find my code on JSFiddle: https://jsfidd ...

javascriptjqueryhtmlcssjquery-waypoints

Arranging cards in a Masonry-like column layout horizontally using Bootstrap 4 orders

Can Bootstrap 4 Cards be ordered from left to right when using the .card-columns class? By default, the order is from top to bottom: 1 3 5 2 4 6 But can they be arranged from left to right like this: 1 2 3 4 5 6 I need to use a Masonry-like grid due t ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

What sets my project apart from the rest that makes TypeScript definition files unnecessary?

Utilizing .js libraries in my .ts project works seamlessly, with no issues arising. I have not utilized any *.d.ts files in my project at all. Could someone please explain how this functionality is achievable? ...

javascripttypescript

Anchor no longer follows endpoint after Anchor ID is modified following creation - JSPlumb

I am currently developing an editor that involves placing shapes on a canvas and assigning IDs to them. When a shape is placed, endpoints are automatically created and attached to the shape using its ID as an anchor. //Function responsible for adding en ...

javascriptjsplumb

Why does isotope cause strange changes in element styles that disrupt the layout?

I am facing an issue where I want to align different divs with background images next to each other without any spacing, similar to this: https://jsfiddle.net/71qpceqb/ Currently, I am using Bootstrap's row and col to achieve this layout. In the pr ...

javascriptjqueryhtmlcssjquery-isotope

Encountering a data retrieval issue when using the useSWR hook in a project using reactjs

I am trying to retrieve data from the backend using useSWR. However, I have encountered two bugs in the function getDataUseSWR. The errors occur at line 'fetch(url).then': 1: "Expected 0 arguments, but got 1."; 2: "Property 'then' does ...

javascriptreactjsnext.jsfetch-api

Filtering a string array in Angular based on an object's value

I am facing a challenge with two arrays in my code. The first array, $scope.termini, contains strings, and the other one, $scope.reserved, contains objects. Each object in the second array has a variable called vrijemeTermina. My goal is to filter $scope.t ...

javascriptangularjsjsonangularjs-filter

What is the best way to display a message or alert after a page has been re

I've implemented Jquery Toastr to display success messages, functioning similarly to an alert for a brief period. My objective is to display a message after the page reloads. The issue arises when the page is reloaded, causing the JavaScript to reloa ...

javascriptjqueryajax

Issue with Highcharts React: The menu button fails to switch from displaying "view full screen" to "exit full screen" when full screen mode is activated

We've encountered some difficulties while using highcharts in React. Specifically, when switching to full screen mode with the menu button, the option for "Exit from full screen" is not visible. Instead, it still reads "View in full screen." Oddly eno ...

javascriptreactjstypescripthighchartsreact-highcharts

Unspecified 'Link' issue while database pooling in node.js

I am currently exploring pooling in node.js. My goal is to initiate a pool connection in the crud_new_op.js file, export the connection to db_crud.js, and then log it in the console. Despite trying various approaches, I consistently receive an "undefined" ...

javascriptnode.js

Disable the default form input reset button generated by Internet Explorer 10

Just have one field form for search input. Below is the HTML code: <form class = "search-form hide-on-mobile"> <input class = "global" type = "text" placeholder = "Who are you looking for ?"> <but ...

htmlcssinternet-explorer-10

Discover the element's selector for the event that was triggered using jQuery

In the process of creating a lightweight real-time application, we are utilizing jQuery's event system to facilitate communication between modules. Any changes made in the DOM that affect elements outside the module are achieved through triggering eve ...

javascriptjquerynode.jsjquery-selectors

What is the process for duplicating a set of elements within an svg file and displaying the duplicate at a specific location?

SVG <svg width="200" height="200"> <g id="group"> <rect x="10" y="10" width="50" height="20" fill="teal"></rect> <circle cx=" ...

javascriptsvgd3.js