CSS - Как контролировать фиксированное положение - PullRequest
0 голосов
/ 04 марта 2020

Я добавил оранжевый квадрат 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>

1 Ответ

2 голосов
/ 04 марта 2020

Попробуйте сделать это с помощью position: sticky и отрегулируйте верх, как хотите. вы можете увидеть больше здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...