Прокрутить блок fixsed

189
11 октября 2018, 05:00

На странице появляется блок div, и чтобы он появлялся в любом участке длинной страницы, ему придали позицию fixed. Высота этого блока может быть разная, в зависимости от просматриваемого текстового контента, и если блок выходит за экран, его уже не прокрутить, прокручивается только основная страница.

Какие параметры задать, чтобы получить обратный эффект: прокручивать вплывающий div блок, а основная страница чтобы стояла на месте? Сам блок появляется с помощью Js, при клике на определённые участки ему придаётся значение display:block, по умолчанию: none.

Answer 1

.a{ 
    top: 100px; 
    left: 100px; 
    position: fixed; 
    background: green; 
    width: 600px; 
    height: 200px; 
    overflow: scroll; 
}
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <title>Online store</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="descritpion" content="Online store on sale of electronics"> 
    <link rel="stylesheet" href="css/main.css"> 
 
</head> 
 
<body> 
    <div class="a"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae eligendi fugiat sint dolor laborum magni dicta nesciunt tempora cupiditate perferendis sed in voluptates voluptatibus harum assumenda perspiciatis aut aperiam, natus, rem itaque quisquam. Animi pariatur distinctio dignissimos, incidunt nisi qui dolores laudantium corrupti iusto tempore laboriosam autem error quasi, voluptatem iure! Cupiditate exercitationem, consectetur minus! Quae repellendus, quibusdam odit aliquam veritatis fugit vitae. Nesciunt in tenetur, pariatur, rem non nobis, voluptates quae, quibusdam blanditiis est quas maiores. Nesciunt voluptas voluptates est temporibus, unde odit. Architecto ex accusantium illo totam veritatis iusto dolorum error, cumque deserunt delectus, ducimus voluptas voluptate quis hic quae laboriosam sit fugit veniam dolor facilis ab necessitatibus repellendus. Ratione asperiores, rem maxime ipsum totam laboriosam odio praesentium sapiente eius, reiciendis saepe a quasi quisquam modi, provident qui possimus, repellendus nihil eligendi non? Error facilis itaque reiciendis qui aspernatur, consectetur soluta voluptatibus iure, quis modi, perspiciatis natus omnis. Quibusdam explicabo similique rerum neque dolore tempora temporibus alias culpa voluptas, perspiciatis, asperiores distinctio tenetur quidem eveniet molestiae? Ullam fugit deleniti dolor aliquid error voluptas repellat consequuntur reiciendis dolores tenetur distinctio, enim, cum labore laborum repellendus beatae autem consequatur sunt officia quaerat nihil perferendis, dolorem minima tempora! Nihil, rerum?</p> 
    </div> 
</body> 
 
</html>

Так?

READ ALSO
Проверить на js существование Cookie [закрыт]
javascript

Проверить на js существование Cookie [закрыт]

Появилась задача проверить существование COOKIE на стороне клиента, если существует, предоставить доступ{Вопрос закрыт}

 176
Разместить react-sidebar по скролу
javascript

Разместить react-sidebar по скролу

Компонент react-sidebar позволяет сделать сайтбар размером с высоту экранаМне нужно на сайте с прокруткой, чтоб сайтбар выходил не сверху, а смещенный...

 161
Отправка заголовков в NodeJS
javascript

Отправка заголовков в NodeJS

В серверной части использую вот такие используемые заголовки

 177
ajax запрос в внутри for django
javascript

ajax запрос в внутри for django

Надо через input изменять цифру внутри input в базе данных templates но запрос отправляется на все и изменяется всё

 169