Ways to make certain HTML elements stay fixed on a webpage while allowing others to be scrollable

In this layout, the page features a navbar at the top followed by a row with two columns. The left column displays the user's profile information (such as profile picture and short bio), while the right column shows other information.

However, when attempting to scroll the page, it seems like the bootstrap card below the navbar is overlapping and scrolling over it.

The desired outcome is to have the navbar and the left column remain fixed in their positions when the page is scrolled, while allowing the right column to be scrolled as normal.

Here is the given HTML structure for reference:

<nav class="navbar navbar-expand-lg navbar-light bg-cream-shade" id='bootstrap-override-navbar'>
  Some nav setup
</nav>
<div class="card bg-cream">
  <div class="row">
    <div class="col-2">
      <div class="card" id='bootstrap-override-card'>
        <div>
          <img src=".." alt="Generic placeholder image"/>
        </div>
        <div class="media">
          <div class="media-body">
            <h5>Chanakya Sunkarapally</h5>
          </div>
        </div>
        <p class="card-text"><small>Some quick info about me. </small></p>
        <div class="list-group list-group-flush">
          <!--list of stuff-->
        </div>
        <div class="card-body">
          Some info
        </div>
      </div>
    </div>
    <div class="col-10 bg-white">
      <!--Some Content-->
    </div>
  </div>
</div>

Below is the CSS styles used on the page:

#bootstrap-override-card {
background: linear-gradient(to bottom, #ffffe1, #fffff4);
border: none;
padding: unset;
top: auto;
position: sticky;
}
.bg-cream{
background:  #fffff4;
}
.bg-cream-shade {
background: linear-gradient(to right, #ffffe1, #fffff4);
}
#bootstrap-override-navbar {
position: sticky;
top: 0;
}

How can this desired behavior be achieved?

Answer №1

If you're looking to add an HTML object within your right column div, you can do so with the following code:

<div class="col-10 bg-white">
    <object class="right-column" type="text/html" data="your_file_path.html" ></object>
</div>

The "right-column" class is used to ensure that the object fills all available space:

.right-column {
    width: 100%;
    height: 100%;
}

By setting it up this way, you can scroll through the right column while keeping the other content fixed. The height of the right column will adjust to the row height, so if you need to change the height, just adjust the row height (which is currently determined by the left column).

Answer №2

To achieve a fixed left column with Bootstrap, you can use the position-fixed class on col-2 and then apply the offset-2 class to col-10 to keep it on the right side...

<nav class="navbar navbar-expand-lg navbar-light bg-cream-shade" id="custom-navbar">
    Some navigation setup
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-2 position-fixed">
            <div class="card" id="custom-card">
                ...
            </div>
        </div>
        <div class="col-10 bg-white offset-2">
            <!-- Content Here -->

        </div>
    </div>
</div>

Check out the demo:

Related inquiries:

How can I implement a fixed sidebar layout using Bootstrap 4?
Creating a fixed and scrollable column in Bootstrap 4 flexbox

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

Having difficulty including text in the website header

I'm struggling to add text on the right side of my header. I have placed small images on the right side of the header, slightly below, and now I want to insert some text above them but I can't seem to get it to work. This is what I'm trying ...

How can I ensure the carousel stays centered on a webpage even after resizing the browser window?

Currently in the process of developing a website, I have implemented a jquery-based carousel on the homepage sourced from here. However, substantial modifications were made to tailor its appearance specifically for the site. The issue at hand is that I hav ...

Special effects for the images动画效果。

Is there a way to add animation effects to images in the about section using this code: <div id="about" class="row section bgimg3"> <div class="col-sm-8"> <h2 style="color:black;">Want to Know More About me?</h2> ...

Switching image sources depending on CSS prefers-color-scheme: A guide

In my endeavor to incorporate the latest CSS prefers-color-scheme media query into my website, I encountered a challenge. I have an img (image) element featuring a very dark blue image, which clashes poorly with the new dark mode setting. Is there a simpl ...

What is the best method to exclude the <a> tag when displaying content in HTML?

Is there a way to hide the link within an a tag when printing? .p { display: none; } @media print { .p { display: initial; } .np { display: none; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ...

Is it possible to determine if a variable is unset using isset?

Currently, I am utilizing the following code snippet to verify if isset is not set. For instance: if(!isset($_REQUEST['search'])) { } else if(!isset($_REQUEST['submit'])) {} I would like clarification on whether !isset is considered ...

Utilizing ng-bind-html alongside ng-controller

Injecting insecure html into a <div> is part of my current task: <div class="category-wrapper" ng-bind-html="content"></div> The angularjs "code" in this html snippet ($scope.content) includes the following: <script type='text/ ...

Hover over buttons for a Netflix-style effect

https://i.stack.imgur.com/7SxaL.gif Is there a way to create a hover effect similar to the one shown in the gif? Currently, I am able to zoom it on hover but how can I also incorporate buttons and other details when hovering over it? This is what I have ...

SQL Server database is showing question marks instead of HTML symbols

Recently, I observed that special HTML symbols like: ★ are appearing as question marks in my database records. I have set the type of the field as varchar and am utilizing Microsoft SQL 2008 for my database management. Is there a solution to this symbo ...

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

I have a form with a list of users and checkboxes below their names. Each user has a button that should select all checkboxes assigned to them. Below is the code for the dynamically created buttons and checkboxes. The included function takes the form name ...

Set a click listener on a button within Ext.window.MessageBox

Currently, I am dynamically generating a message box using Ext.window.MessageBox. var msgBox = Ext.create('Ext.window.MessageBox', { title: '', //message in window msg: 'message text', icon: ' ...

What strategies can be used to ensure that the page layout adjusts seamlessly to even the smallest shifts in window size?

Of course, I am familiar with media queries and how they allow us to set specific min-width and max-width ranges for CSS changes. However, when I look at the website styledotme.com, I notice that the block/div beneath the navigation bar gradually shrinks ...

How can I alter the display of table rows and columns using responsive design techniques?

Currently utilizing bootstrap, I have a drinks menu displayed in the following layout when viewed in Firefox. The mobile view of this menu is functioning properly. However, I am encountering issues with the desktop view as the columns are not aligning cor ...

The issue with the placement of the Bootstrap navbar-brand

My regular bootstrap navbar is presenting a problem where the item "navbar-brand" appears higher than the other items in the navbar, which seems illogical. This issue does not occur on the official bootstrap page and persists even when tested on jsfiddle. ...

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself. var $a= $('#a'), $v= $('#v'), $s= $('#s'), ...

What is the best way for me to insert a paragraph between two lists?

Is it possible to insert a paragraph in between lists even though it's not allowed? Here is an example of the code: <ol> <li>One</li> <p>Paragraph 1</p> <li>Two</li> <p>Paragraph 2</p ...

The radio button selection cannot be transmitted via email

Only the first radio button is selected <div class="field_radio" name="preference" > <input class="radio1" type="radio" name="preference" id="preference" value="team" onclick="ShowHideDiv()" /><label for="radio1"> ...

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

Ensuring that the carousel images maintain a consistent size when switching between images

Issue with Carousel I have been struggling with a carousel feature on my website. Despite following the code provided on the Bootstrap website, I am facing an issue where the height and width of the entire div change when loading the next image. I have tr ...

Retrieving list item contents using PHP DOM scraping

Is it possible to use PHP DOM screen scraping to extract the content from an HTML tag named <li style="margin-top:10px"> that appears on one of my web pages? I am looking to retrieve all the data within the <li> tag and present it as HTML co ...