Я добавил оранжевый квадрат Newsletter на свою веб-страницу. В этот момент он перемещается всякий раз, когда я начинаю прокручивать, но я хочу, чтобы он двигался только тогда, когда достигнет вершины прокрутки.
Вот как это выглядит: изображение веб-страницы
И это то, что я пробовал до сих пор:
.head_image_container
{text-align: center;}
.head_image
{width: 60%;
margin-top: 80px;}
.newsletter
{position: fixed;
left: 62.2%;
top: 74%;
background-color: #FFAC3E;
padding: 30px 55px 30px 55px;
color: white;
font-family: "Poppins";
font-size: 17px;
font-weight: 500;}
.mail
{padding: 3px 2px 3px 2px;
border-style: none;
font-family: "Poppins";}
.submit
{padding: 5.2px 4px 5.2px 4px;
border-style: none;}
.articulo
{font-family: "Lato";
font-size: 19px;
color: #6A6A6A;
margin-left: 20%;
margin-right: 42%;
line-height: 27px;
text-align: justify;}
<div class="head_image_container">
<img class="head_image" src="imagenes/basico/compresion/compre.jpg"/>
</div>
<form class="newsletter">
<label for="mailID">Recibí nuestro Newsletter!</label><br><br>
<input type="text" id="mailID" class="mail">
<input type="submit" class="submit" value="Enviar">
</form>
<div class="articulo">
<p class="date">Jueves 9 de Enero, 2020</p>
<article>
¿Qué es un compresor? Según Wikipedia: “En el campo del sonido profesional, un compresor es un procesador
electrónico de sonido destinado a reducir el margen dinámico de la señal sin que se note demasiado su
presencia. Esta tarea se realiza reduciendo la ganancia del sistema, cuando la señal supera un determinado
umbral.”</br></br>
Ahora bien, es necesario tener ciertos cuidados al leer esta definición ya que es algo vaga y no del todo
acertada.</br></br>
Comencemos por tratar de entender el concepto de “rango dinámico”. Este refiere a la diferencia entre el
punto con el valor mínimo y el máximo de una señal de audio, medido en decibeles (dB). A mayor diferencia
entre ambos puntos, mayor rango dinámico.</br></br>
</article>