Intenté de todo pero no puedo hacer que el footer
me deje de seguir cuando hago scroll
, quiero que quede abajo de forma fija y que solo pueda verlo cuando llego al final de la página.
Intenté con absolute
y con static
, pero me sigue o se queda estático en medio de la pantalla y no sé como bajarlo cuando se queda quieto ahí.
Este es el código de html
:
<!-- no te redirige -->
<div>
<a href="javascript:void(0);" id="icon-menu" class="icon">
</a>
</div>
<!-- muestra los producto -->
<div id="container-products" class="container">
</div>
<footer class="subs">
<div class="container-foot">
<h2>queres recibir ofertas de Coca-Cola?</h2>
<input class="search-input" placeholder="Email"/>
<div class="hr"></div>
<button class="boton-standar">subscribite</button>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<!-- <script src="./js/productos.js"></script> -->
<script src="./js/index.js"></script>
Este es el de css
:
footer.subs {
color: white;
text-align: left;
background-image: url(https://i.gifer.com/KzDn.gif);
background-size: cover;
background-position: 400px 20px;
background-attachment: fixed;
margin-bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer.subs input {
background-color: transparent;
max-width: 300px;
}
footer.subs .hr {
margin: 15px 5px;
width: 450px;
border: 1px solid white;
}