简单地更改为position: fixed将使此工作如你所愿.我已经添加了一堆文本段落，使页面滚动，这样你就可以看到这是如何在不同大小的页面上工作，而对话框将停留在屏幕上的固定位置，无论页面大小或滚动位置.

visible = false;

const container = document.querySelector('.cta-container')

document.querySelector('button').addEventListener('click', () => {
  visible = !visible

  if (visible) {
    container.classList.remove('hidden')
    container.classList.add('visible')
  } else {
    container.classList.remove('visible')
    container.classList.add('hidden')
  }
})

.cta-container {
  position: fixed;
  bottom: 16px;
  left: 24px;
  padding: 16px;
  padding-right: 64px;
  background-color: white;
  transition: all 0.2s;
}

.header {
  font-size: 20px;
  margin-bottom: 8px;
}

.content {
  font-size: 16px;
}

.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
}

.hidden {
  transform: translateY(190px);
}

.visible {
  transform: translateY(-16px);
}

<button type="button">Toggle visibility</button>

<div class="cta-container mat-elevation-z5 hidden">
  <h1 class="header">Do something</h1>

  <p class="content">Yada yada</p>

  <button type="button">Ok</button> <button type="button">No</button>
</div>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

position：fixed...但我也做了一些代码简化...

const container = document.querySelector('.cta-container')

document.querySelector('button').onclick =_=> 
  {
  container.classList.toggle('noShow')
  }

.cta-container {
  position         : fixed;
  bottom           : 16px;
  left             : 24px;
  padding          : 16px;
  padding-right    : 64px;
  background-color : white;
  transition       : all 0.2s;
  }
.cta-container.noShow {
  transform  : translateY(190px);
  }
.cta-container:not(.noShow) {
  transform  : translateY(-16px);
  }
.mat-elevation-z5 {
  box-shadow : 0px 3px  5px -1px rgba(0, 0, 0, 0.2 )
             , 0px 5px  8px  0px rgba(0, 0, 0, 0.14)
             , 0px 1px 14px  0px rgba(0, 0, 0, 0.12);
  }
.header {
  font-size     : 20px;
  margin-bottom : 8px;
  }
.content {
  font-size : 16px;
  }

<button>Toggle visibility</button>

<div class="cta-container mat-elevation-z5 noShow">
  <h1 class="header">Do something</h1>

  <p class="content">Yada yada</p>

  <button>Ok</button> <button>No</button>
</div>