如何使按钮在滚动时从底部和整个屏幕宽度出现？

Question

有一个从左侧滚动时出现的按钮。 但是，我希望它位于底部且按钮全宽为屏幕尺寸。 任何想法，谢谢

 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>

我在 #btn2 和 #btn2.visible 字段中更改了 css 中的一些内容，您可以将它们与您的答案进行比较，看看我做了什么。