How to make button appear from bottom and full width of screen on scroll?

Question

Have a button that appears when scrolling coming from the left. However, I want it to be on bottom and the button full width of screen size. Any ideas, thanks

 const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); btn1.addEventListener('click', function(e) { e.preventDefault(); if (btn2.className.includes('visible')) { btn2.classList.remove('visible'); } else { btn2.classList.add('visible'); } }); // hides the side button const showBtn2 = () => { btn2.classList.add('visible'); }; // shows the side button const hideBtn2 = () => { btn2.classList.remove('visible'); }; // get position of button 1 // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect const getButton1Position = () => { return btn1.getBoundingClientRect(); }; window.addEventListener('scroll', function(e) { const btn1Position = getButton1Position(); console.log(btn1Position.bottom) if (btn1Position.bottom < 0) { showBtn2(); } else { hideBtn2(); } });

 body { min-height: 300vh; overflow-y: scroll; } h1 { text-align: center; margin-top: 100px; } button { height: 60px; width: 200px; display: block; margin: 30px auto; } #btn2 { position: fixed; top: 10vh; left: -200px; z-index: 2; transition: transform ease-in-out 0.3s; } #btn2.visible { transform: translateX(200px); } p { margin: 50px; }

 <h1> My great Website </h1> <button id="btn1"> Sign in </button> <button id="btn2"> Sign in </button> <p>Listen for window scroll events. Check the button to see if it is still visible. If it is not visible, toggle the hidden button into view.</p>

Answer 1

 const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); btn1.addEventListener('click', function(e) { e.preventDefault(); if (btn2.className.includes('visible')) { btn2.classList.remove('visible'); } else { btn2.classList.add('visible'); } }); // hides the side button const showBtn2 = () => { btn2.classList.add('visible'); }; // shows the side button const hideBtn2 = () => { btn2.classList.remove('visible'); }; // get position of button 1 // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect const getButton1Position = () => { return btn1.getBoundingClientRect(); }; window.addEventListener('scroll', function(e) { const btn1Position = getButton1Position(); console.log(btn1Position.bottom) if (btn1Position.bottom < 0) { showBtn2(); } else { hideBtn2(); } });

 body { min-height: 300vh; overflow-y: scroll; } h1 { text-align: center; margin-top: 100px; } button { height: 60px; width: 200px; display: block; margin: 30px auto; } #btn2 { width: 100%; position: fixed; top: 150%; left: 0px; z-index: 2; transition: all ease-in-out 0.3s; } #btn2.visible { top: 100%; margin: 0; transform: translateY(-100%); } p { margin: 50px; }

 <h1> My great Website </h1> <button id="btn1"> Sign in </button> <button id="btn2"> Sign in </button> <p>Listen for window scroll events. Check the button to see if it is still visible. If it is not visible, toggle the hidden button into view.</p>

I change some things in your css in the #btn2 and #btn2.visible fields you can compare them with your answers to see what i did.