CSS - 如何控制固定位置

Question

我在我的网页上添加了一个时事通讯橙色方块。此时，只要我开始滚动，它就会移动，但我希望它仅在到达滚动顶部时移动。

这是它的样子： webpage image

这是我迄今为止尝试过的：

.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>

Answer 1

尝试使用position: sticky 并根据需要调整顶部.. u can see more here