Issue with position: fixed element escaping its container in Bootstrap 4 while scrolling

I have implemented a customized progress bar that increases as I scroll down, adjusting according to the content. When I scroll up, the progress bar decreases.

However, when I tried using position: fixed, the bar breaks out of the container level instead of staying within it and being left and right aligned.

My goal is to achieve this using position: fixed.

Any assistance or guidance on how to accomplish this would be greatly appreciated. Thank you.

var trackingBar = $(".bar");

if (trackingBar.length) {
  var moveTrackingBar = function() {
    var winHeight = $(window).height();
    var docHeight = $(document).height();
    var scrollHeight = docHeight - winHeight;
    var hasScrolled = $(window).scrollTop();

    var percent = (hasScrolled / scrollHeight) * 100;
    trackingBar.css("width", percent + "%");
  }
}

$(window).on("resize scroll", moveTrackingBar);

$(window).trigger("scroll");
.track {
  background: transparent;
  height: 7px;
  margin-bottom: 4rem;
  width: 100%;
}

.bar {
  background: red;
  height: 7px;
  z-index: 1;
  position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="track">
        <div class="bar"></div>
      </div>
      <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.</p>
      <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.</p>
      <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.</p>
      <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.</p>
    </div>
  </div>
</div>

htmljquerycssbootstrap-4css-position

Answer №1

The main issue arises from the use of position: fixed, which essentially removes the element from the normal document flow. Consequently, without a reference to its parent, CSS calculations for inherited dimensions become unattainable.

To address this issue, you can manually compute the percentage width as an explicit pixel value based on the width of .container.

Furthermore, it's worth noting that the if condition surrounding the definition of the moveTrackingBar() function is unnecessary and can be eliminated.

let $trackingBar = $(".bar");
let $container = $('.container');

let moveTrackingBar = () => {
  let winHeight = $(window).height();
  let docHeight = $(document).height();
  let scrollHeight = docHeight - winHeight;
  let hasScrolled = $(window).scrollTop();

  let percent = hasScrolled / scrollHeight;
  let width = $container.width() * percent; // addition of this calculation
  $trackingBar.css("width", width + 'px');
}

$(window).on("resize scroll", moveTrackingBar).trigger("scroll");
.track {
  background: transparent;
  height: 7px;
  margin-bottom: 4rem;
  width: 100%;
}

.bar {
  background: red;
  height: 7px;
  z-index: 1;
  position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="track">
        <div class="bar"></div>
      </div>
      <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.</p>
      <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.</p>
      <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.</p>
      <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.</p>
    </div>
  </div>
</div>

Answer №2

Ensure position:sticky is applied to the track element.

var trackingBar = $(".bar");

if (trackingBar.length) {
  var moveTrackingBar = function() {
    var winHeight = $(window).height();
    var docHeight = $(document).height();
    var scrollHeight = docHeight - winHeight;
    var hasScrolled = $(window).scrollTop();

    var percent = (hasScrolled / scrollHeight) * 100;
    trackingBar.css("width", percent + "%");
  }
}

$(window).on("resize scroll", moveTrackingBar);

$(window).trigger("scroll");
.track {
  background: transparent;
  height: 7px;
  margin-bottom: 4rem;
  position: sticky;
  top:0;
  z-index: 1;
}

.bar {
  background: red;
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="track">
        <div class="bar"></div>
      </div>
      <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.</p>
      <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.</p>
      <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.</p>
      <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.</p>
    </div>
  </div>
</div>

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

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

javascripthtmlcssowl-carousel

Cordova encountered an error: Execution of inline script was denied due to violation of Content Security Policy directive

As I delve into the world of Cordova and jquery mobile, I encountered a perplexing error that reads: Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: 'un ...

javascriptjqueryhtmlnode.jscordova

Static Camera Three.js Video Background Exploration

I'm currently working on a webpage that combines a video background with an interactive WebGL element in the foreground. The concept is to have a stationary camera while a 3D object moves in the foreground. I followed a CSS video background tutorial, ...

htmlcssthree.js

Is there a way for me to utilize the Bootstrap carousel without it adjusting the height as the user transitions from slide 1 to slide 2?

body{ background-color: #CAF7E3; } .container-fluid{ padding: 3% 15%; } .navbar{ font-family: 'Montserrat'; font-weight: bold; } .navbar-brand{ font-size: 2.5rem; } .nav-item{ margin-right: 2rem; } #title{ padding: 8% 15%; backgr ...

htmlcss

Require assistance resolving a CSS problem on IE8?

Greetings everyone, I am currently facing some compatibility issues with my style sheets, particularly in IE 8. The CSS code below functions perfectly in my Chrome/Firefox style sheet, but unfortunately, it does not have any effect on my IE stylesheet. # ...

cssxhtmlinternet-explorer-8

Looking for assistance with Jquery - how to select a newly created DOM element immediately after its creation?

Why is this particular code not functioning correctly on Chrome 4.0 while it works perfectly on FF 3.5? The issue at hand is that the selector $('li#node-'+nodes[i].id +'').append function does not work in chrome, but seems to be functi ...

jqueryjquery-selectors

Is it possible to use VBA to scrape the web for a specific style?

I've been on a quest to find a workaround for this issue but without any luck. All the data at my workplace is accessible through a web portal that generates static HTML pages. Unfortunately, my department doesn't have direct access to the Serve ...

htmlvbaexcelweb-scraping

In order to display() or delete() a specific element based on the logged-in user, it is necessary

(function($){ $(document).ready(function() { $('.nlgchat').hide(); // hiding the chat section by default var usernames = ['Mr.EasyBB','runawayhorses','BL@DE','SirChivas']; var nameslist='&ap ...

javascriptjquery

Having trouble with the Bootstrap 5 Modal? Discover how to ensure smooth functionality

How can I configure a Bootstrap 5 Modal to open only after clicking on a specific Navbar Dropdown item, without causing the whole website to be disabled and ensuring that all close buttons function correctly? <!doctype html> <html lang="en"> ...

htmljquerycssbootstrap-modalbootstrap-5

Which is more efficient: Editing the image 'src' or replacing the 'img' tag within a Div?

var currentImage = 0; var totalImages = 8; $(document).ready(function(){ $("#next-img").click(function(){ currentImage = currentImage + 1; if (currentImage > totalImages) {currentImage = 1;}; $(".img-class").attr('src',"http://examp ...

jqueryajax

generate a cookie within a pop-up window

Can someone help me figure out why my Modal Window with a cookie to display only once isn't working? I followed this tutorial at . Here is the link to my website: Here is my code: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" a ...

javascriptjquerycookiesjquery-cookie

Angular js encountered an unexpected error: [$injector:modulerr] ngRoute

https://i.sstatic.net/PATMA.png In my Angular code, I encountered the error "angular is not defined". This code was written to test the routing concept in AngularJS. var app=angular.module('myApp',['ngRoute']) .config(function ($routeP ...

javascripthtmlangularjsangularjs-routing

Phonegap's JavaScript canvas feature is experiencing issues

Recently, I came across a JavaScript bouncing ball animation that works perfectly on the Chrome browser when used on a PC. However, when I tried running it using Phonegap Eclipse Android emulator, I encountered an issue where the canvas appeared blank and ...

javascriptandroidhtmlcordova

Changing the size of an image in an HTML5 canvas

I have been attempting to generate a thumbnail image on the client side using Javascript and a canvas element. However, when I reduce the size of the image, it appears distorted. It seems as though the resizing is being done with 'Nearest Neighbor&apo ...

javascripthtmlcanvasimage-resizing

Retrieve the value of the chosen option from a dropdown menu that adjusts dynamically within

I have a query that involves dynamically adding rows to a table for data insertion. A particular <td> element houses a dropdown menu, and I need to extract the selected value from this dropdown in order to make an AJAX call back to a PHP script that ...

javascriptjqueryajax

Creating interactive JavaScript elements that can be moved around within a container

I recently faced a challenge while attempting to make draggable elements within a div. The issue arose when I realized that I couldn't figure out how to drag each element individually without affecting the others. My current code only allows for handl ...

javascripthtmljquerydrag-and-dropdraggable

Using Jquery, the index number is returned for each item in an array, and then that index is set as a "rel

I am working on modifying the Jquery Infinite Carousel to resize the image container dynamically based on the currently displayed image. My dilemma lies in obtaining the index of the Li element that contains the current image. The issue is that Infinite Ca ...

jqueryarraysgetcarouselinfinite

Tips for locating all events linked to a specific text box using JQUERY

I'm currently encountering a major issue with textboxes on a page that I've been tasked to update. Whenever I attempt to input text into the textboxes, the span element next to them disappears. My application is built using ASP.NET and relies on ...

javascriptjquery

Synchronous AJAX calls in jQuery

My system needs to handle up to 180 IO-intensive AJAX jobs on the server side, involving long running SELECT queries. To optimize CPU core usage, I want to transition from executing these AJAX calls sequentially to allowing a maximum of 4 parallel request ...

javascriptjqueryajax

Is it possible to rearrange an array by moving an element to the front

If I have an array as shown below, how can I move key [2] and its corresponding value to the front of the array? This would make it key [0] and increment the other keys by 1. Current: [0] => Array ( [name] => Vanilla Coke cans 355ml x 2 ...

phphtmlarrays