Utilize CSS to freeze a variety of elements

I have three different elements positioned at the top of my webpage that I want to make responsive. Here is the code I am currently using:

#prayer_time .page-header {
    position: fixed;
    top: 40px;
    left: 290px;
    right: 0;
    z-index: 99; 
}

#prayer_time .col-md-12 {
    position: fixed;
    top: 75px;
    z-index: 99;
    padding-right: 0;
    padding-left: 0;
    width: 78.5%; 
}

<main id="content" role="main" class="main pointer-event">    
    <div class="content container-fluid" id="prayer_time">
        <div class="page-header">
            <div class="row align-items-center">
                <!-- more code here -->
            </div>
        </div>
        <div class="col-md-12">
            <div class="card">
                <div class="card-header p-2">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link">
                                January
                            </a>
                        </li>
                        <!-- more <li> here -->
                    </ul>
                </div>
            </div>
        </div>
        <div class="row gx-2 gx-lg-3">
            <div class="col-sm-12 col-lg-12 mb-3 my-lg-2">
                <div class="card">
                    <div class="table-responsive datatable-custom">
                        <table id="columnSearchDatatable" class="table table-borderless">
                            <thead class="thead-light">
                                <tr>
                                    <!-- more code here -->
                                </tr>
                            </thead>
                            <tbody id="set-rows">
                                <!-- more code here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

I want to make the 

<div class="page-header">
, 
<div class="col-md-12">
, and the <thead> of 
<table id="columnSearchDatatable" class="table table-borderless">
elements freeze in position on the page, but I am struggling to make them responsive.

Currently, the code freezes a row, but responsiveness is not working as desired.

htmlcss

Answer №1

To achieve a sticky effect on your elements, use position: sticky instead. If you want the children elements to stick and hide the previous elements, you can add background-color: white and top: 0; styles to your elements. To show all sticky elements stacked one under the other, you can use 

top: "calculate height of previous sticky element";

.content{
background-color:gray;
height:40px;
overflow:auto;
}

#prayer_time .page-header {
    position: sticky;
    top: 0px;
    left: 290px;
    right: 0;
    z-index: 99; 
}

#prayer_time .col-md-12 {
    position: sticky;
    top: 0px;
    background-color: gray;
    z-index: 99;
    padding-right: 0;
    padding-left: 0;
    width: 78.5%; 
}
<main id="content" role="main" class="main pointer-event">    
    <div class="content container-fluid" id="prayer_time">
        <div class="page-header">
            <div class="row align-items-center">
                header
            </div>
        </div>
        <div class="col-md-12">
            <div class="card">
                <div class="card-header p-2">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link">
                                January
                            </a>
                        </li>
                        <!-- more <li> here -->
                    </ul>
                </div>
            </div>
        </div>
        <div class="row gx-2 gx-lg-3">
            <div class="col-sm-12 col-lg-12 mb-3 my-lg-2">
                <div class="card">
                    <div class="table-responsive datatable-custom">
                        <table id="columnSearchDatatable" class="table table-borderless">
                            <thead class="thead-light">
                                <tr>
                                    thead
                                </tr>
                            </thead>
                            <tbody id="set-rows">
                                body
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

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

Issue with overlapping sticky dropdown and sticky navigation in Bootstrap 4

My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. Whil ...

htmlcssbootstrap-4

The convergence of lighttpd with AngularJS's html5 mode offers a powerful

My angularJS website is hosted on a lighttpd server, but the html5 mode encounters a 404 error when I refresh or use a direct link. On my local Apache server, everything works fine and there are no issues with the rewrite expression in the .htaccess file. ...

angularjshtmlurl-rewritinglighttpdmode

What are the steps for incorporating a linear-gradient hue into a Slider?

Is it possible to apply a linear-gradient as color to Material-UI Slider? I have tried everything but can't seem to make it work. color: 'linear-gradient(180deg, #29ABE2 0%, #00EAA6 100%)' ...

cssreactjsmaterial-ui

Is your Navbar having trouble readjusting its height?

My navbar is not resizing properly when I shrink the logo image. Here's a link to the Codepen page with the full code: https://codepen.io/gabor-szekely/pen/JeMqQz I'm trying to reduce the size of the "Sino Medical" logo image in the top left co ...

htmlcssnavbarmargin

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

I have a challenge where I need to hide forms in a list if they are empty. These forms contain string values. I attempted to use *ngIf but unfortunately, it did not work as expected and empty fields are still visible in the list. How can I address this iss ...

javascripthtmlcssangulartypescript

Issue encountered when attempting to upload several images on Laravel

I am working on a feature that allows registered users to create posts with the ability to upload multiple images. The goal is to store the image paths in the images table along with the post_id to associate each image with the correct post. However, upon ...

phphtmllaravel

Does renaming a sub-directory in the static directory of an IntelliJ Spring Boot project cause any changes?

I'm a newcomer to IntelliJ and I've been using it to develop a Spring Boot application. Right now, my project structure looks like this: https://i.sstatic.net/7A7jb.png My goal is to set up a "css" directory within the "static" directory under ...

javacssspringspring-bootintellij-idea

Is it possible to adjust the left property following the concealment of an element with JQuery?

My goal is to move an image element using the 'left' property after hiding a div. To achieve this, I am using JQuery's '.promise()' function. Here is my code: HTML code: <div id="outerContainer"> <div id=" ...

jqueryhtmlcss

Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

I've been attempting to create a video carousel using Bootstrap 5, and one issue I'm encountering is the appearance of a white background when hovering over the arrow. Normally, it shouldn't display a background, but for some reason, it does ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-carousel

Transferring information back and forth between jQuery and Servlet

Looking for a solution to extract data from an HTML form and send it to a servlet? Here's a sample HTML form along with the script: <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> <s ...

jqueryhtmlajaxformsservlets

Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

I have a fixed header at the top of my page. When it scrolls, I want to ensure that it does not cover or hide any of my content, especially the top portion of the section. // This code enables smooth scrolling (source: css-tricks) $('a[href*="#"]:no ...

jqueryhtmlcss

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

This is my first venture into the world of HTML and JavaScript, so I am asking for your patience. I am trying to incorporate the Datepicker widget from jQuery UI, following the instructions on the Getting Started page. There seems to be an issue with lin ...

javascriptjqueryhtmljquery-uijquery-ui-datepicker

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page. Butt ...

javascripthtmlcss

The debate over website background images: balancing size and speed

Has anyone experimented with background images and their impact on web design? Typically, backgrounds are designed to repeat in either the x or y direction, or both. For example Consider a gradient background that repeats horizontally. If the gradient i ...

htmlrenderingbackground-image

Having Trouble Concealing an Element with jQuery UI

I am attempting to implement a jQuery slide effect where pressing a button causes the first paragraph tag to slide out of view and the second paragraph tag to slide into the viewport. Despite utilizing jQuery UI for the slide effects, I am encountering dif ...

javascriptjqueryhtmluser-interface

Is the CSS3 bar chart flipped?

I'm currently developing a responsive bar chart, and everything seems to be going smoothly except for one issue - when viewing it in full screen, the bars appear to be flipped upside down. It's quite puzzling as all other elements such as text an ...

htmlcssbar-chart

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

javascripthtmlcssthree.js

The Facebook like button disappears after being used just once

I've encountered an odd issue that hopefully someone can help me understand. WEBSITE: ISSUE: Initially, the like button functions properly. However, upon refreshing the page or navigating away and returning to the homepage, the like button mysterio ...

htmlcachingfacebook-like

Click to switch divs

I am struggling and in need of help. I have been trying to rotate divs on click using jQuery, which was successful until I had two sets of divs that needed to be rotated independently on the same page. When clicking on the arrows to rotate the content in t ...

jqueryhtmlcss