fixed button with scrollable content

fixed button on scroll
fixed header on scroll html
make div fixed after scrolling
css fixed header scrolling body
fixed div on scroll jquery example
sticky div on scroll
fixed header bootstrap

Goodmorning, I'm currently working on a project where I need to have a fixed button at the end of a div and then the ability to scroll the content of that div while still being able to see the button. Here is the code:

<div id="ModalEmail" class="detailModalContainer">
<div class="detailModal">
    <div class="modalBoxHeader">
        <h4 translate="EMAIL"></h4>
        <div data-ng-click="$ctrl.close()">
            <span class="icon ti-close"></span>
        </div>
    </div>
    <div class="modalBody">
        <div class="step">


            <h4 data-translate="CHOOSE_TEMPLATE"></h4>
            <div class="template-list">
            <div class="template-item" data-ng-repeat="template in $ctrl.emailTemplates" data-ng-class="{ active: template === $ctrl.selectedTemplate }">
                <div class="template-info">
                    <span>{{template.title}}</span>
                    <span class="ti-check"></span>
                </div>
                <div class="use-template" data-ng-click="$ctrl.selectTemplate(template)" translate="USE_TEMPLATE"></div>
                <img class="template-preview" data-ng-src="data:image/jpeg;base64,{{template.preview}}" />
            </div><br /><br /></div>
            <span data-translate="CHOOSE_TEMPLATE_ERROR" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.error }"></span><br /><br />
            <span data-translate="NO_TEMPLATES_AVAILABLE" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.emailTemplates.length === 0 }"></span><br /><br />


            <div >
             <button class="btn btn-template customize" type="button" data-ng-click="$ctrl.goToEdit()"><span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
            </div>
        </div>
    </div>
</div>

Inside of the .step div I print all the contents I need to visualize on my page, the button at the end of the code should actually be fixed. With that I mean that I should be able to scroll the content of div while still be able to see that button. I have tried with positioning without any results. Any recommendations? Thanks for your help in advance

This sounds like a job for flexbox. Here's a quick sample:

.container {
display: flex;
flex-direction: column;
overflow: hidden;
}

.body {
flex: 1 1 auto;
overflow: auto;
}

footer {
flex: 0 0 auto;
}




/* display styles only */
.container {
  height: 200px;
  width: 500px;
  background: lightgray;
}

footer {
padding: 12px;
}
<div class="container">
  <div class="body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus libero in tortor venenatis, ac mollis ante posuere. Phasellus quam velit, suscipit at urna et, dictum dictum massa. Integer nec quam vitae tortor pretium varius et ac lacus. Ut luctus a purus in ultricies. Suspendisse vehicula ex vitae libero varius suscipit. Donec a mi at augue vestibulum tempus. Curabitur volutpat, magna in ullamcorper fringilla, neque massa hendrerit orci, eu hendrerit enim neque at nibh.

Pellentesque felis orci, convallis id mattis ac, iaculis eu odio. Nam varius, sem faucibus semper aliquet, dui nisi pretium purus, sed malesuada libero neque a lacus. Cras vulputate ullamcorper justo, et pellentesque ante tincidunt non. Integer pharetra at urna a tempus. Cras et elit dolor. Quisque at bibendum turpis. Suspendisse potenti. Integer in sapien ac nunc volutpat lacinia. In facilisis diam vitae lobortis lacinia. Nam eget aliquam libero. Praesent elementum luctus imperdiet. Suspendisse sit amet dictum ipsum.

Etiam blandit nunc ut tellus lobortis, quis interdum diam mollis. Vivamus auctor justo quis fermentum fermentum. Fusce justo augue, eleifend ut placerat in, cursus a tortor. Nam fringilla, ex non varius ultrices, est nulla interdum dolor, vitae varius purus enim eget lacus. Vivamus vulputate eu purus at molestie. Morbi dictum, nibh eleifend porta ullamcorper, felis quam pharetra eros, in facilisis nibh velit ut mi. Cras faucibus pharetra nunc vitae finibus. Mauris dui dolor, lobortis iaculis leo ac, mollis varius velit. Nulla tincidunt mauris eu magna tristique suscipit. Sed tempor orci magna. Suspendisse est nulla, accumsan nec aliquet auctor, ultrices vel odio. Proin dapibus tortor vel lacus porttitor, ac tincidunt sapien faucibus. Sed neque urna, ornare vitae ultricies ut, rutrum et magna. Fusce pulvinar tellus ultrices nunc vulputate consequat a in arcu. Vivamus iaculis mi vel neque mattis, in malesuada felis mollis. Curabitur nec tempus tellus.

Cras dolor orci, laoreet eu turpis et, convallis aliquam velit. Sed porttitor in ipsum eget sodales. In vestibulum quam nec pulvinar ornare. Nulla ut consectetur tellus. Praesent sollicitudin condimentum tellus, efficitur dictum purus dictum sit amet. Maecenas ultricies libero id viverra varius. Praesent auctor arcu ac mauris posuere molestie. Quisque nisl nisi, aliquet vel venenatis eget, malesuada a lorem. Cras eget magna erat. Nunc quis erat dictum, sagittis enim et, placerat mauris. Curabitur consequat elit non nibh egestas, pulvinar condimentum nulla tristique. In ut auctor risus. Aenean magna felis, imperdiet quis lectus sed, ultrices mollis dui.

Aliquam non bibendum sapien, vitae euismod odio. Praesent consequat lobortis lectus nec dictum. Integer interdum sapien nibh, ac dictum mauris egestas sit amet. Sed pellentesque dolor id maximus pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus augue, lacinia in enim vel, eleifend efficitur ante. Curabitur non euismod mauris, ac consectetur metus. Nulla sed odio nunc. Integer placerat gravida scelerisque. Morbi sit amet neque id urna rhoncus faucibus non in libero. Integer diam quam, sodales non vulputate ut, accumsan nec ligula.
  </div>
  <footer>
  Fixed footer
  <button>Button</button>
  </footer>
</div>

How to make fixed header table inside scrollable div?, How do I create a fixed header table inside a scrollable div? In my react, i'm using simple-flexbox for my grid. When i add position: fixed to my sidebar component, my main component overlaps with the sidebar. Kindly help me out on how i can go about solving

You can use overflow:hidden; overflow-y:scroll; on the div with the content.

<div class="outer">
  <div class="inner">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nemo voluptates exercitationem reprehenderit quo corrupti iste, facilis ipsa, similique, animi ducimus excepturi eaque sunt! Perferendis soluta modi ratione odio excepturi.</p>
      <p>Quam, blanditiis. Error, dolore nostrum. Hic, recusandae maxime? Laudantium fuga maxime obcaecati suscipit voluptas quod debitis quaerat reprehenderit maiores, alias fugiat molestias quae aliquam commodi eius quas neque beatae dolorem!</p>
      <p>Beatae quis repellendus, accusantium amet expedita nisi blanditiis eum omnis. Facere impedit beatae doloribus obcaecati temporibus a illum eligendi explicabo sed quia quo voluptas, sint nam qui eveniet dolorem laboriosam!</p>
      <p>Nostrum eum voluptas culpa accusamus excepturi, suscipit a similique tempora alias fugit ullam consequatur molestiae velit animi doloribus ducimus neque debitis, placeat omnis, quisquam delectus corrupti repellendus. Corporis, nemo minus.</p>
      <p>Velit magni voluptate animi error minus illo quisquam atque odit quaerat nam omnis, amet consequatur laboriosam eum assumenda reprehenderit debitis quos nesciunt unde perspiciatis nulla dolor a repellat. Eaque, voluptatibus!</p>
      <p>Veritatis, neque delectus. Repudiandae tenetur optio facilis voluptas aliquam nostrum placeat consequatur maiores dignissimos inventore voluptates, eum illo a aperiam dolor quod recusandae doloremque repellendus. Ratione doloribus nostrum distinctio dolores?</p>
      <p>Maiores et quae vel eveniet sint maxime totam quo reiciendis! Ea quam labore, asperiores voluptatibus animi reprehenderit quibusdam dolorum cupiditate sunt dicta dolore delectus expedita ducimus? Numquam culpa asperiores voluptatum.</p>
      <p>Ipsum, excepturi. Iure nisi cumque dolorem praesentium mollitia impedit aperiam explicabo similique, sit vero, doloribus, reprehenderit iusto qui numquam eum assumenda quod nostrum esse voluptatem facilis. Debitis quidem adipisci omnis.</p>
      <p>Delectus, nostrum dignissimos. Amet, ipsa incidunt explicabo vero perferendis autem laudantium et voluptatibus tempore officia debitis tenetur rem eveniet illo odio ipsam magnam impedit esse nostrum quas ipsum accusamus. Voluptatum.</p>
   </div>
<div class="btn-wrap"><button class="btn">Click Me</button></div>
</div>

<style>
.outer {
/* ignore this just for presentation*/
  max-width: 500px;

}
.inner {
overflow:hidden;
overflow-y:scroll;
height: 250px;

}
</style>

heres a codepen https://codepen.io/NeilWkz/pen/GzpqwB

On your example you add a height, and overflow:hidden; overflow-y: scroll; to the step class.

How to Create Fixed Header or Footer Using CSS, How do I create a fixed header and footer layout in HTML? A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

You can try this I just add <div class="popup"> <div class="popup-content"> and for the button I put the class="dismiss-popup-btn"

.popup {
    position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
    border: 2px solid #000;
    width: 520px;
    height: 150px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
}
.popup p {
  margin: 0 0 10px 0;
}

.dismiss-popup-btn {
    position: absolute;
    top: 120px;
    right: 370px;
    width: 60px;
    height: 24px;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  
   
    background-color: #ffffe6;
}
.popup-content {
  padding-top: 30px;
  overflow-y: auto;
  padding: 20px;
}
<div class="popup">
                    <div class="popup-content">

 <p>Marty McLane has taught courses at each of our conferences. He is particularly adept at all things Ancestry.</p>
                    <p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
   <p>Front-end development relies on organization and solid communication. Whether you're part of a team that builds large-scale sites or you're flying solo with a handful of quality clients, there are many pieces and steps to get a project from start to finish. And that's not just limited to the development phase of a project, either. Think about sales proposals, estimates, sign-offs, and approvals among many other things. There's a lot that goes into even what we might consider a routine … <p>Marty McLane has taught courses at each of our</p> conferences. He is particularly adept at all things Ancestry.</p>
                    </div>
                    </div>
                  
            <div >
             <button class="dismiss-popup-btn" type="button" data-ng-click="$ctrl.goToEdit()">button<span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
            </div>
    

Create a sticky sidebar, in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly. See the Pen On Scroll Fix Content by David Schroeder (@simpleminded) on CodePen. One issue with this though is I haven’t fully tested it be responsive. The problem using VH units is if you’re also making it 100% wide, it shrinks with the problem causing that box to also shrink down.

Scrollable list with fixed button, Put the button after the ul like, and let the scroll only on the ul : <div class="​dropdown-menu"> <ul> <li><a href="#" class="small" data-value="option1"  I want the button and image to stay “fixed” in popup’s upper right and the text to scroll up underneath them. I tried position: fixed for the button but that fixed the button relative to the view port, not to popup. The button stayed fixed in the view port and everything else scrolled under it.

How To Create an On Scroll Fixed Header, Page content */ .content { padding: 16px; } /* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; /* The sticky class is added to the header with JS when it reaches its scroll position */.sticky { position: fixed; top: 0; width: 100%} /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */.sticky + .content

How To Create a Sticky Element, Example. div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } A sticky element toggles between relative and fixed , depending on the scroll  Set CSS Position property to fixed, bottom and right properties to 0px. Use cases : A feedback button or a chat window. Example codepen embedded below. Adjust bottom and right properties to style it as per your needs. It is responsive too! See the Pen fixed button – bottom right of screen by Ranjith (@Ranjithkumar10) on CodePen.23550

Comments
  • Possible duplicate of Fixed div inside scrolling div
  • any idea how to do this without flexbox?
  • can you show me exactly how to do that with my code ?
  • this example actually works, only problem is that the button is positioned on the left of the parent. how to center that ?
  • You can put text-align: center on the parent, in this case .btn-wrap