I am looking to make the elements in the red box on the left side of the page fixed so that as users scroll, they remain at the top of the page. I have attempted to use both the fixed and sticky properties, but neither seem to be working for me.
Here is a preview:
Before scrolling: https://i.sstatic.net/4EERw.png
After scrolling: https://i.sstatic.net/PpPB9.png
You can find the page here:
There are numerous fantastic examples available on w3schools.com showcasing the implementation of a Fixed Sidebar
Below is my take on it using Bootstrap 4, CSS, and vanilla Javascript
var sideNavBarWidth = document.getElementsByClassName('side-navbar');
var innerNavBar = document.getElementsByClassName('inner-navbar');
// Creating a 1rem space from both sides
innerNavBar["0"].style.minWidth = (sideNavBarWidth["0"].offsetWidth - (32)) + 'px';.list-group-item {
cursor: pointer !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-light">
<div class="col-12">
<div class="row">
<div class="col-3 border border-dark px-0 py-4 side-navbar">
<div class="position-fixed inner-navbar mx-3">
<ol class="list-group">
<a href="#" class="list-group-item my-1">Chapter 1</a>
<a href="#" class="list-group-item my-1">Chapter 2</a>
<a href="#" class="list-group-item my-1">Chapter 3</a>
<a href="#" class="list-group-item my-1">Chapter 4</a>
<a href="#" class="list-group-item my-1">Chapter 5</a>
</ol>
</div>
</div>
<div class="col-9 border border-dark px-4 py-4">
<div class="row mb-3 px-4 jumbotron-fluid">
<h1>Chapter 1</h1>
</div>
<div class="row mb-3 px-4 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna
aliqua. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Interdum varius sit
amet mattis vulputate
enim nulla aliquet. Malesuada fames ac turpis egestas. Blandit aliquam etiam erat velit
scelerisque in dictum. Sit amet
massa vitae tortor condimentum lacinia quis. Non arcu risus quis varius. Eget nulla facilisi
etiam dignissim diam quis.
Quis imperdiet massa tincidunt nunc pulvinar sapien et. Nullam non nisi est sit amet facilisis.
Eget duis at tellus at.
Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Suscipit tellus
mauris a diam maecenas
sed enim. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Orci porta non
pulvinar neque laoreet
suspendisse interdum. Sem viverra aliquet eget sit amet tellus cras. Pulvinar pellentesque
habitant morbi tristique
senectus et. Aliquet sagittis id consectetur purus ut faucibus pulvinar.
</div>
<div class="row mb-3 px-4 text-justify">
[Repeat Lorem Ipsum content for demonstration purposes]
</div>
[Repeated sections to showcase functionality]
<div class="row mb-3 px-4 text-justify">
[..Last iteration of the repeated content..]
</div>
</div>
</div>
</div>
</div>I trust this solution fits your requirements perfectly.
Currently, I am utilizing GrooCSS 1.0-GA for my CSS coding needs. Regrettably, it appears that GrooCSS does not provide support for breakInside as illustrated in the code snippet below: GrooCSS.process(new Config(prettyPrint: true)) { body { breakIns ...
Looking to achieve centered text for a summary where the arrow, when clicked, reveals additional details. However, currently, the text and arrow are on separate lines. The goal is to have the arrow on the same line as the summary text and perfectly center ...
Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...
I am working on a loop that generates multiple boxes with masonry layout containing post excerpts. <div class="box"> <div class="image"> <img src="" /> </div> <div class="info"> <h3>//title output with ...
I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...
Currently, I am facing an issue with opening a modal for form filling in Vue.Js using Bootstrap. The problem is that the modal content is only covering a small part of the entire modal. In an attempt to troubleshoot, I incorporated Google's Materiali ...
Web Development : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> The Coding Academy Survey</title> <link rel="stylesheet" href="styles.css" ...
When a specific link is clicked, I want a div to display with a fadeIn effect and then fadeOut when the link is clicked again. However, after the first click following an HTTP request, the fadeIn works but the fadeOut does not (the div closes though). More ...
I encountered an issue in the final line <?php } ?> as it reports a syntax error, unexpected '}' <?php if (isset($_SESSION['u_id'])) { //echo "You are logged in!"; include_once 'database.php&apo ...
Is there a way to refresh a Leaflet map integrated with Vue2Leaflet when it's initially hidden and then displayed (for example, when hidden by a bootstrap collapse element)? <template> <b-container> <b-button v-b-toggle="collapse ...
My Images are refusing to align in a horizontal row no matter what I try. Output: https://i.sstatic.net/echGV.png .img-size-square { width: 100%; height: auto; max-width: 400px !important; max-height: 400px !important; } .container-f ...
I'm looking for a CSS selector to target the first <tr> in a <table>. After searching online, I found some selectors like tr:first-child and table *:first-child tr:first-child, table tr:first-child. Unfortunately, these do not work in my ...
Can the CSS of a parent page be modified from an iframe when the parent page and iframe are hosted on separate domains? ...
Currently, I am working on a web application that features a navigation bar at the bottom of the screen. To enhance visibility, I decided to apply a linear gradient overlay above the underlying elements. This screenshot illustrates what I mean. However, I ...
Currently, I am using Vue3 with Vite and attempting to integrate Bootstrap into my project. While I have managed to implement most of it successfully, I encountered a significant error when trying to override Bootstrap-related variables. Can anyone offer a ...
Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...
Currently, I am facing an issue with the hamburger menu not responding on my mobile device. Oddly enough, it does work when I resize my browser window to mimic a mobile size. There seems to be a glitch happening, but I'm struggling to pinpoint the exa ...
I am having trouble getting my button element to redirect my page to another page. I have tried using an onclick function inside the button tag with window.location.href, as well as creating a separate function for the redirect, but nothing seems to be wor ...
I am struggling with styling Vue checkboxes to display side by side until they wrap to a new line. I have tried modifying the code structure, but the existing CSS classes are causing issues. I have created a simplified example on CodeSandbox. Here is a sn ...
Is there a way to make the entire background of the page clickable using just HTML and CSS? <div style="position: fixed; top:0px; left:0px; z-index: -1; background: url() center center no-repeat; width: 100%; height:100%;"> <a href='http ...