Strategies for maintaining a sticky element while transitioning between containers

Question

Strategies for maintaining a sticky element while transitioning between containers

My challenge involves a sticky button located inside a container, but the sticky behavior only seems to work within another element that is full width (container-fluid). Is there any way to make the sticky behavior global?

I have attempted using 'fixed' instead of 'sticky,' but I require the specific behavior that 'sticky' provides. Additionally, I need to maintain the website structure with a container-fluid between containers.

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <div class="container" style="background-color: green;">
    <div class "row">
      <div class="col-12">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nibh convallis pharetra et fames orci, vestibulum dictum bibendum justo neque metus sem vivamus gravida cursus libero vehicula. Hendrerit ut per risus ac
      </div>
    </div>
    <div class="row sticky-top">
      <div class="col-12">
        <button class="btn btn-primary">Sticky</button>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nibh convallis pharetra et fames orci, vestibulum dictum bibendum justo neque metus sem vivamus gravida cursus libero vehicula. Hendrerit ut per risus accumsan lacus fames himenaeos orn...
      </div>
    </div>
  </div>

  <div class="container-fluid" style="background-color: yellow;">
    <div class="row">
      <div class="col-12">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nibh convallis pharetra et fames orci, vestibulum dictum bibendum justo neque metus sem vivamus gravida cursus libero vehicula. Hendrerit ut per risus accumsan lacus fames himenaeos orn...
      </div>
    </div>
  </div>

  <div class="container" style="background-color: green;">
    <div class="row">
      <div class="col-12">
        Lore... 
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

</body>

</html>
@endsection

javascript html css bootstrap-4

Answer 1

Answer №1

It is recommended to apply the following properties to the button element instead of the row. Avoid attempting to modify the default classes within a framework, such as trying to apply a `sticky` position to a `row` in Bootstrap - this is not a good practice.

.btn.btn-primary{
    position: fixed;
    top: 0;
    z-index: 1020;
}

Regarding the second question, it is not feasible to alter the behavior of the `container fluid` and `container` classes in the Bootstrap framework, as these are fundamental parent classes that structure elements like `row`, `col`, and `div`. However, you can create your own custom class to achieve the desired outcome.

Answer 2

It is recommended to apply the following properties to the button element instead of the row. Avoid attempting to modify the default classes within a framework, such as trying to apply a `sticky` position to a `row` in Bootstrap - this is not a good practice.

.btn.btn-primary{
    position: fixed;
    top: 0;
    z-index: 1020;
}

Regarding the second question, it is not feasible to alter the behavior of the `container fluid` and `container` classes in the Bootstrap framework, as these are fundamental parent classes that structure elements like `row`, `col`, and `div`. However, you can create your own custom class to achieve the desired outcome.

Answer 3

Answer №2

If you're looking to incorporate JavaScript into your project, the following code snippet may be helpful:

let stick = document.querySelector(".sticky-top");
let fluid = document.querySelector(".container-fluid");

window.addEventListener("scroll", function(){
  let fluidBounds = fluid.getBoundingClientRect();
  let stickHeight = stick.getBoundingClientRect().height;

  if(fluidBounds.y <= stickHeight) {
    stick.style.position = "fixed";
  } else {
    stick.style.position = "sticky";
  }
});

Answer 4

If you're looking to incorporate JavaScript into your project, the following code snippet may be helpful:

let stick = document.querySelector(".sticky-top");
let fluid = document.querySelector(".container-fluid");

window.addEventListener("scroll", function(){
  let fluidBounds = fluid.getBoundingClientRect();
  let stickHeight = stick.getBoundingClientRect().height;

  if(fluidBounds.y <= stickHeight) {
    stick.style.position = "fixed";
  } else {
    stick.style.position = "sticky";
  }
});

Strategies for maintaining a sticky element while transitioning between containers

Answer №1

Answer №2

Similar questions

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

I am having trouble embedding YouTube videos with my code

When the page is zoomed in, the image exceeds the boundaries of the parent div

Modify FullCalendar: Adjust background color for agendaDay

PHP script encounters XmlHttpRequest issue when working with a basic task management application

When attempting to transfer data to a CSV file from my Firebase database, I encounter an issue where the

Changing the map behavior when it is moved in Leaflet

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

Working with Garber-Irish in Rails: Streamlining Administration and Keeping Code DRY

A guide on incorporating a method using ES6 Rest into a JavaScript object

Is there a way to display the overall count of items in ReCharts?

Issue with Firefox compatibility in Backbone.js

Preserve jQuery-enhanced webpage changes permanently

When incorporating Routes into App, it is important to note that React does not accept functions as valid children

Exploring the Content Returned by AJAX

Clicking on the title link will open the content in an iframe, but the image

Why does my contact form display PHP code unexpectedly?

The bar chart in chartjs is not displaying properly due to incorrect grouping

The error message "Error: 'x' is not a defined function or its output is not iterable"

Is it possible to modify variables in the controller when the route is changed?