Creating a static header and footer with a scrollable body

Can someone help me with a modal popup that has a sliding effect? I need the modal body to be scrollable while keeping the Header and Footer in their fixed positions without any overflow. I've been trying to figure it out but can't seem to get it right. If anyone could take a look at my code and point out where I'm going wrong, I would really appreciate it.

// Your custom JavaScript code here...
.plans-modal .drawer-left .modal-content {
  /* Your custom CSS styling here... */
}

// More CSS styles for different elements within the modal...

<head>
  // Head content goes here...
</head>

<body>

    <a href="#" data-drawer-trigger aria-controls="slide-from-left" aria-expanded="false">Left Drawer</a>


  <div class="plans-modal">


    <section class="drawer drawer-left" id="slide-from-left" data-drawer-target>
      <div class="drawer-overlay" data-drawer-close tabindex="-1"></div>
      <div class="drawer-wrapper">
        <div class="modal-content">

          <div class="modal-header">
            <p class="modal-logo-title">
              <img src="web.png"> Web Development 
            </p>
          </div>
          
          <div class="modal-body">

            // Modal body content goes here...

          </div>
          
          <div class="modal-footer">

            // Footer content goes here...

          </div>

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

  </div>

javascripthtmlcssmodal-dialog

Answer №1

To achieve the desired effect, ensure that both the modal-header and modal-footer elements have a CSS property of position: sticky. Additionally, move the modal-header element one level up next to its parent.

var drawer = function () {
      // JavaScript code for drawer functionality
    };
    drawer();
.plans-modal .drawer-left .modal-content {
  /* CSS styles for modal content */
}

/* More CSS styles for different components within the modal */

/*---------------------------- HEADER -------------------------*/    
.modal-header {
  position: sticky;
  top: 0;
}
/* Additional header styles */

/*---------------------------- FOOTER -------------------------*/ 
.plans-modal .drawer-left .modal-footer {
  position: sticky; /* Added style for footer */
  bottom: 0;
}
/* Additional footer styles */


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
  <title>MODAL CARDS</title>
</head>

<body>

    <a href="#" data-drawer-trigger aria-controls="slide-from-left" aria-expanded="false">Left Drawer</a>

  <div class="plans-modal">
    <section class="drawer drawer-left" id="slide-from-left" data-drawer-target>
      <div class="drawer-overlay" data-drawer-close tabindex="-1"></div>
      <div class="drawer-wrapper">
        <div class="modal-header">
          <!-- Header content -->
        </div>
        
        <div class="modal-content">
          <div class="modal-body">
            <!-- Body content -->
          </div>
          
          <div class="modal-footer">
            <!-- Footer content -->
          </div>
        </div>
      </div>
    </section>
  </div>

Answer №2

To implement a sticky header:

position:sticky
top:0;

And for the footer:

position:sticky;
bottom:0;

Here is an example of how it should be styled:

#Header

.plans-modal .drawer-left .modal-header {
    background-color: #1f2236;
    border-top-right-radius: 10px;
    border-bottom: 4px solid #e8576f;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
}
/*---------------------------- FOOTER -------------------------*/

.plans-modal .drawer-left .modal-footer {
    background-color: #1f2236;
    border-bottom-right-radius: 10px;
    border-top: 4px solid #e8576f;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    bottom: 0;
}

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

Disabling the 'fixed navigation bar' feature for mobile devices

Here's a code snippet that I'm working with. It has the ability to make the navigation stick to the top of the page when scrolled to. HTML <script> $(document).ready(function() { var nav = $("#nav"); var position = nav.position(); ...

javascriptjqueryhtmlcss

Find any consecutive lowercase or uppercase letter and include one more

I have a task in Javascript that I need help with. The goal is to insert a special character between a lowercase and uppercase letter when they are matched together. For example: myHouse => my_House aRandomString => a_Random_String And so on... T ...

javascriptregextypescript

Is there a way to verify if the JSON Object array includes the specified value in an array?

I am working with JSON data that contains categories and an array of main categories. categories = [ {catValue:1, catName: 'Arts, crafts, and collectibles'}, {catValue:2, catName: 'Baby'}, {catValue:3, catName: 'Beauty ...

javascriptjqueryarraysjson

Is Meteor rejecting div calls when not inside getJson?

Recently, I had a rather interesting encounter with Meteor.js. Let me walk you through my code snippet: Template.mytemplate.rendered = function(){ $.getJSON('http://ip-api.com/json/?callback=?', function(lingo){ $('.location').text(" ...

javascriptjsonajaxmeteor

Tips for Concealing PHP Undefined Error Messages Using Echo

I'm new to PHP and I'm attempting to display user information in a div after submission using the echo function. Here is my current code snippet: <label class="input-fields" name="cust-name"> Name <input type="text" id="cust[name]" ...

phphtml

What is the best way to create a structured arrangement of nested divs using a recursive query?

I recently encountered a challenging recursive postgresql query that retrieves data in the following format: id depth path has_children 1 1 1 true 2 2 1.2 true 3 3 1.2.3 true 4 4 1.2.3.4 ...

phphtml

A guide on effectively mocking functions in Jest tests with Rollup.js

I am currently in the process of developing a React library called MyLibrary, using Rollup.js version 2.58.3 for bundling and jest for unit testing. Synopsis of the Issue The main challenge I am facing is with mocking a module from my library when using j ...

javascriptreactjsunit-testingjestjsrollupjs

Dealing with errors in external URLs with AngularJS: A guide to intercepting errors in $resource or $http services

I have set up a separate server for my angularjs app, which is different from my grunt server. This external server runs on Apache and uses PHP to serve JSON data. I want to be able to catch any potential server errors, ranging from "server down" to "404". ...

javascriptangularjscors

Trigger a modal popup upon page load event generated from the server side using C#

I am trying to display a modal popup based on certain conditions during the page load event, but I am facing some issues. This is my modalPopup code: <script type="text/javascript"> function openModal(message, header, url) { $('#my ...

javascriptc#jqueryasp.nettwitter-bootstrap

Conceal the scroll bar while still allowing for scrolling functionality

In this code snippet, I am trying to maintain the scroll position of two blocks by syncing them together. Specifically, I want to hide the scrollbar of the left block while scrolling the right one. If anyone has any suggestions or solutions for achieving ...

javascriptjquerycss

What is the best way to modify the text color within a Navbar, especially when the Navbar is displayed within a separate component?

First question on StackOverflow. I have a Next App and the Navbar is being imported in the _app.js file. import Navbar from "../Components/Navbar"; function MyApp({ Component, pageProps }) { return ( <> <Navbar /> ...

javascripthtmlcssreactjsnext.js

Is it possible for JavaScript code to access a file input from the terminal?

When I run the command cat input.txt | node prog.js >result.txt in my terminal, I need to use an input file. This is my code: var fs = require('fs'); var str = fs.readFileSync('input.txt', 'utf8'); str.replace(/^\s* ...

javascriptshell

Incorporate an external JavaScript script using code

I'm currently working on integrating a map widget from 'Awesome Table' into the codebase of an open-source CRM platform. The specific code snippet I need to add is <div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"> ...

javascriptjqueryhtmlsrc

Implementing tooltips that require a click instead of hovering

How can I make a JavaScript tooltip only appear when clicking on an element instead of hovering over it? I tried the following code: var selection = canvas.selectAll("circle").data(data); selection.enter().append("circle"); canvas.append("svg:circle") ...

javascriptjqueryhtmltooltipqtip

The element will display above all other elements in its parent container

I am currently developing a React application, and the code structure is set up as follows: <Div> <Div style={{maxHeight:'60vh'}}> //This section includes the code for displaying a list item. Each item has its context menu that can ...

htmlcssreactjs

React: The issue with async and await not functioning as expected when using fetch

I am working with an API on a Node server that returns JSON data like this: {"result":[{"ProductID":1,"ProductName":"iPhone10","ProductDescription":"Latest smartphone from Apple","ProductQuan ...

javascriptjsonreactjsfetch-api

Create a simulation of the :focus state on a div triggered by a key press

Is there a way to implement previous and next navigation using the left and right arrow keys? I would also like the state of the links to change to :focus when the arrow keys are pressed, providing tactile feedback. I thought about using addClass but I&apo ...

javascriptjquery

Switching from jQuery to Vanilla JavaScript and eliminating  

Is there a way to convert this jQuery code into a Vanilla JS equivalent? I've been searching for a solution but haven't had any luck so far. document.querySelectorAll('p').forEach(element => { element.innerHTML = element.innerHTML ...

javascriptjquery

Error: The function replace cannot be used on elem

Here is what I am attempting to achieve: for loop inside the append is not working Below is my code: $('body').append( $('<section>').append( $('<form>') .attr('class', "ac-custom a ...

javascriptjqueryhtmlcss

Is there a way to add a <video> tag in tinymce editor without it being switched to an <img /> tag?

I am attempting to include a <video> tag within the tinymce editor, but it keeps changing it to an <img> tag. Is there a way to prevent this conversion and keep the <video> tag intact? I want to enable videos to play inside tinymce whil ...

javascripthtmltinymce-4