Home > Blockchain >  How to make fixed Header and Footer with Scrollable body
How to make fixed Header and Footer with Scrollable body

Time：07-16

I have created a modal popup with sliding effect but the issue that I'm facing is, I want to make the modal body scrollable but the Header and Footer should remain at their exact position without any overflow. I tried many times but I don't know where i am doing mistake, so if you give your little time to find out my problem it will be very helpful for me.

    var drawer = function () {
      if (!Element.prototype.closest) {
        if (!Element.prototype.matches) {
          Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
        }
        Element.prototype.closest = function (s) {
          var el = this;
          var ancestor = this;
          if (!document.documentElement.contains(el)) return null;
          do {
            if (ancestor.matches(s)) return ancestor;
            ancestor = ancestor.parentElement;
          } while (ancestor !== null);
          return null;
        };
      }    

      var settings = {
        speedOpen: 50,
        speedClose: 350,
        activeClass: 'is-active',
        visibleClass: 'is-visible',
        selectorTarget: '[data-drawer-target]',
        selectorTrigger: '[data-drawer-trigger]',
        selectorClose: '[data-drawer-close]',
      };

      var toggleAccessibility = function (event) {
        if (event.getAttribute('aria-expanded') === 'true') {
          event.setAttribute('aria-expanded', false);
        } else {
          event.setAttribute('aria-expanded', true);
        }   
      };

      var openDrawer = function (trigger) {
        var target = document.getElementById(trigger.getAttribute('aria-controls'));
        target.classList.add(settings.activeClass);
        document.documentElement.style.overflow = 'hidden';
        toggleAccessibility(trigger);
        setTimeout(function () {
          target.classList.add(settings.visibleClass);
          trapFocus(target);
        }, settings.speedOpen); 
      };

      var closeDrawer = function (event) {
        var closestParent = event.closest(settings.selectorTarget),
          childrenTrigger = document.querySelector('[aria-controls="'   closestParent.id   '"');
        closestParent.classList.remove(settings.visibleClass);
        document.documentElement.style.overflow = '';
        toggleAccessibility(childrenTrigger);
        setTimeout(function () {
          closestParent.classList.remove(settings.activeClass);
        }, settings.speedClose);             
      };

      var clickHandler = function (event) {
        var toggle = event.target,
          open = toggle.closest(settings.selectorTrigger),
          close = toggle.closest(settings.selectorClose);
        if (open) {
          openDrawer(open);
        }
        if (close) {
          closeDrawer(close);
        }
        if (open || close) {
          event.preventDefault();
        }

      };

      var keydownHandler = function (event) {
        if (event.key === 'Escape' || event.keyCode === 27) {
          var drawers = document.querySelectorAll(settings.selectorTarget), i;
          for (i = 0; i < drawers.length;   i) {
            if (drawers[i].classList.contains(settings.activeClass)) {
              closeDrawer(drawers[i]);
            }
          }
        }
      };

      document.addEventListener('click', clickHandler, false);
      document.addEventListener('keydown', keydownHandler, false); 
    };
    drawer();
.plans-modal .drawer-left .modal-content {
  background-color: #2b2f4b;
}

.plans-modal .drawer-left .modal-body .plan-card-1 {
  background-color: #1f2236;
  border: 3px solid #e8576f;
  border-radius: 15px;
  margin: 20px;
}

.plans-modal .drawer-left .modal-body .card-title {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color:#e8576f;
  padding: 12px 0px;
  margin: 0;
}

.plans-modal .drawer-left .modal-body .card-hr {
  margin:0 auto;
  max-width:85%;
  background-color: #e8576f;
  height: 2px; 
  border: 0;
}

.plans-modal .drawer-left .plan-price {
  margin: 0 auto;
  text-align: center;
  padding: 12px 0px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e8576f;
} 

.plans-modal .drawer-left .modal-body .card-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

.plans-modal .drawer-left .modal-body .card-items ul {
        margin: 0;
        padding: 20px 15px;
}

.plans-modal .drawer-left .modal-body .card-items ul li {
  list-style-type: none;
  font-size: 14px;
  color: #fff;
}

.plans-modal .drawer-left .modal-body .card-items ul li .fa-arrow-circle-right {
  margin-right: 4px;
  color: #e8576f;
}

.plans-modal .drawer-left .modal-body .card-items ul li:not(:last-child) {
  padding-bottom: 14px;
}


/*---------------------------- HEADER -------------------------*/    

.plans-modal .drawer-left .modal-content {
  height: 100vh;
  border: 5px solid #e8576f;
  border-left: none;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
}

.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;
}

.plans-modal .drawer-left .modal-header .modal-logo-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.plans-modal .drawer-left .modal-header img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}

/*---------------------------- HEADER -------------------------*/ 


/*---------------------------- 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;
}

.plans-modal .drawer-left .modal-footer .plans-btns {
  display: flex;
  margin-right: 55%;
  font-size: 22px;
  color: #e8576f;
  cursor: pointer;
}

.plans-modal .drawer-left .modal-footer .plans-btns #btnUp:hover {
  color: #fff;
  transition: 0.5s ease;
}

.plans-modal .drawer-left .modal-footer .plans-btns #btnDown:hover {
  color: #fff;
  transition: 0.5s ease;
}

.plans-modal .drawer-left .modal-footer .plans-btns #btnDown {
  margin-left: 7px;
}

.plans-modal .drawer-left .modal-footer .close-btn {
  padding: 5px 12px;
  background:#e8576f;
  color:#fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  border: none;
}

.plans-modal .drawer-left .modal-footer .close-btn:hover {
  background: #fff;
  color: #e8576f;
  transition: 0.5s ease;
}

/*---------------------------- FOOTER -------------------------*/ 


/* ------------------ ONLY SLIDER CODE ----------------*/

    .drawer {
      display: none;
    }
    .drawer-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 200;
      opacity: 0;
      transition: opacity 0.3s;
      will-change: opacity;
      background-color: #000;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;      
    }

    .drawer-wrapper {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      z-index: 9999;
      overflow: auto;
      transition: transform 0.5s;
      will-change: transform;
      background-color: transparent;
      /* display: flex;
      flex-direction: column;  */
      /* -webkit-overflow-scrolling: touch;  */
      box-shadow: 0 2px 6px #777;
    }

    .drawer-right .drawer-wrapper {
      right: 0;
      left: auto;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      width: 350px;
      max-width:90%;
    }

    .drawer-left .drawer-wrapper {
      left: 0;
      right: auto;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      width: 350px;
      max-width:90%;
    }

    .drawer-bottom .drawer-wrapper {
      bottom: 0;
      top: auto;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      width: 100%;
      max-height: 350px;
    }

    .drawer.is-active {
      display: block;
    }

    .drawer.is-visible .drawer-wrapper {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .drawer.is-visible .drawer-overlay {
      opacity: 0.5;
    }
<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 >


    <section  id="slide-from-left" data-drawer-target>
      <div  data-drawer-close tabindex="-1"></div>
      <div >
        <div >

          <div >
            <p >
              <img src="web.png"> Web Development 
            </p>
          </div>
          
          <div >

            <div >
              <p >Static Website</p>
              <hr >
              <span >
                <ul >
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                </ul>
              </span>
              <hr >
              <p ><i ></i> 4,999/-</p>
            </div>
            
            <div >
              <p >Static Website</p>
              <hr >
              <span >
                <ul >
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                </ul>
              </span>
              <hr >
              <p ><i ></i> 4,999/-</p>
            </div>

          </div>
          
          <div >
            <span >
              <i  id="btnUp"></i>
              <i  id="btnDown"></i>
            </span>
            <button  data-drawer-close>Close</button>
          </div>

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

  </div>

CodePudding user response：

You need to give the modal-header and modal-footer elements position: sticky, also you need to move modal-header element one level next to it's parent.

var drawer = function () {
      if (!Element.prototype.closest) {
        if (!Element.prototype.matches) {
          Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
        }
        Element.prototype.closest = function (s) {
          var el = this;
          var ancestor = this;
          if (!document.documentElement.contains(el)) return null;
          do {
            if (ancestor.matches(s)) return ancestor;
            ancestor = ancestor.parentElement;
          } while (ancestor !== null);
          return null;
        };
      }    

      var settings = {
        speedOpen: 50,
        speedClose: 350,
        activeClass: 'is-active',
        visibleClass: 'is-visible',
        selectorTarget: '[data-drawer-target]',
        selectorTrigger: '[data-drawer-trigger]',
        selectorClose: '[data-drawer-close]',
      };

      var toggleAccessibility = function (event) {
        if (event.getAttribute('aria-expanded') === 'true') {
          event.setAttribute('aria-expanded', false);
        } else {
          event.setAttribute('aria-expanded', true);
        }   
      };

      var openDrawer = function (trigger) {
        var target = document.getElementById(trigger.getAttribute('aria-controls'));
        target.classList.add(settings.activeClass);
        document.documentElement.style.overflow = 'hidden';
        toggleAccessibility(trigger);
        setTimeout(function () {
          target.classList.add(settings.visibleClass);
          trapFocus(target);
        }, settings.speedOpen); 
      };

      var closeDrawer = function (event) {
        var closestParent = event.closest(settings.selectorTarget),
          childrenTrigger = document.querySelector('[aria-controls="'   closestParent.id   '"');
        closestParent.classList.remove(settings.visibleClass);
        document.documentElement.style.overflow = '';
        toggleAccessibility(childrenTrigger);
        setTimeout(function () {
          closestParent.classList.remove(settings.activeClass);
        }, settings.speedClose);             
      };

      var clickHandler = function (event) {
        var toggle = event.target,
          open = toggle.closest(settings.selectorTrigger),
          close = toggle.closest(settings.selectorClose);
        if (open) {
          openDrawer(open);
        }
        if (close) {
          closeDrawer(close);
        }
        if (open || close) {
          event.preventDefault();
        }

      };

      var keydownHandler = function (event) {
        if (event.key === 'Escape' || event.keyCode === 27) {
          var drawers = document.querySelectorAll(settings.selectorTarget), i;
          for (i = 0; i < drawers.length;   i) {
            if (drawers[i].classList.contains(settings.activeClass)) {
              closeDrawer(drawers[i]);
            }
          }
        }
      };

      document.addEventListener('click', clickHandler, false);
      document.addEventListener('keydown', keydownHandler, false); 
    };
    drawer();
.plans-modal .drawer-left .modal-content {
  background-color: #2b2f4b;
}

.plans-modal .drawer-left .modal-body .plan-card-1 {
  background-color: #1f2236;
  border: 3px solid #e8576f;
  border-radius: 15px;
  margin: 20px;
}

.plans-modal .drawer-left .modal-body .card-title {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color:#e8576f;
  padding: 12px 0px;
  margin: 0;
}

.plans-modal .drawer-left .modal-body .card-hr {
  margin:0 auto;
  max-width:85%;
  background-color: #e8576f;
  height: 2px; 
  border: 0;
}

.plans-modal .drawer-left .plan-price {
  margin: 0 auto;
  text-align: center;
  padding: 12px 0px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e8576f;
} 

.plans-modal .drawer-left .modal-body .card-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

.plans-modal .drawer-left .modal-body .card-items ul {
        margin: 0;
        padding: 20px 15px;
}

.plans-modal .drawer-left .modal-body .card-items ul li {
  list-style-type: none;
  font-size: 14px;
  color: #fff;
}

.plans-modal .drawer-left .modal-body .card-items ul li .fa-arrow-circle-right {
  margin-right: 4px;
  color: #e8576f;
}

.plans-modal .drawer-left .modal-body .card-items ul li:not(:last-child) {
  padding-bottom: 14px;
}


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

.plans-modal .drawer-left .modal-content {
  height: 100vh;
  border: 5px solid #e8576f;
  border-left: none;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
}

.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;
}

.plans-modal .drawer-left .modal-header .modal-logo-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.plans-modal .drawer-left .modal-header img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}

/*---------------------------- HEADER -------------------------*/ 


/*---------------------------- 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;
}

.plans-modal .drawer-left .modal-footer .plans-btns {
  display: flex;
  margin-right: 55%;
  font-size: 22px;
  color: #e8576f;
  cursor: pointer;
}

.plans-modal .drawer-left .modal-footer .plans-btns #btnUp:hover {
  color: #fff;
  transition: 0.5s ease;
}

.plans-modal .drawer-left .modal-footer .plans-btns #btnDown:hover {
  color: #fff;
  transition: 0.5s ease;
}

.plans-modal .drawer-left .modal-footer .plans-btns #btnDown {
  margin-left: 7px;
}

.plans-modal .drawer-left .modal-footer .close-btn {
  padding: 5px 12px;
  background:#e8576f;
  color:#fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  border: none;
}

.plans-modal .drawer-left .modal-footer .close-btn:hover {
  background: #fff;
  color: #e8576f;
  transition: 0.5s ease;
}

/*---------------------------- FOOTER -------------------------*/ 


/* ------------------ ONLY SLIDER CODE ----------------*/

    .drawer {
      display: none;
    }
    .drawer-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 200;
      opacity: 0;
      transition: opacity 0.3s;
      will-change: opacity;
      background-color: #000;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;      
    }

    .drawer-wrapper {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      z-index: 9999;
      overflow: auto;
      transition: transform 0.5s;
      will-change: transform;
      background-color: transparent;
      /* display: flex;
      flex-direction: column;  */
      /* -webkit-overflow-scrolling: touch;  */
      box-shadow: 0 2px 6px #777;
    }

    .drawer-right .drawer-wrapper {
      right: 0;
      left: auto;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      width: 350px;
      max-width:90%;
    }

    .drawer-left .drawer-wrapper {
      left: 0;
      right: auto;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      width: 350px;
      max-width:90%;
    }

    .drawer-bottom .drawer-wrapper {
      bottom: 0;
      top: auto;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      width: 100%;
      max-height: 350px;
    }

    .drawer.is-active {
      display: block;
    }

    .drawer.is-visible .drawer-wrapper {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .drawer.is-visible .drawer-overlay {
      opacity: 0.5;
    }
<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 >


    <section  id="slide-from-left" data-drawer-target>
      <div  data-drawer-close tabindex="-1"></div>
      <div >
                <div >
            <p >
              <img src="web.png"> Web Development 
            </p>
          </div>
        <div >
          
          <div >

            <div >
              <p >Static Website</p>
              <hr >
              <span >
                <ul >
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                </ul>
              </span>
              <hr >
              <p ><i ></i> 4,999/-</p>
            </div>
            
            <div >
              <p >Static Website</p>
              <hr >
              <span >
                <ul >
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                  <li><i ></i> Category: Static Website</li>
                </ul>
              </span>
              <hr >
              <p ><i ></i> 4,999/-</p>
            </div>

          </div>
          
          <div >
            <span >
              <i  id="btnUp"></i>
              <i  id="btnDown"></i>
            </span>
            <button  data-drawer-close>Close</button>
          </div>

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

  </div>

CodePudding user response：

You need to give the header

position:sticky
top:0;

And give the footer

position:sticky;
bottom:0;

like this :

#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;
}

Page link：https//www.codepudding.com/Blockchain/477237.html

Prev:Getting Error an error message for Collapse component on Material UI
Next:How to get multiple product details from Google Play Billing 5?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding