Прокрутка в DIV?

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

У меня есть следующие в моем HTML:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="UnCo.css"> 
<title>21Webb | Under Construction</title> 
</head> 

<body> 
    <div class="updateSoMe blok alBeMe" style="overflow:scroll; height:100px;"> 
    <h1>Updates & social media</h1> 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
</div> 
</body> 
</html>

И это в моем CSS:

.updateSoMe { 
display: inline-block; 
float: right; 
} 

.updateSoMe h1 { 
text-align: center; 
} 

.alBeMe { 
width: 49%; 
} 

.alBeMe h1 { 
background-color: #F6A22C; 
margin: 0px; 
border-radius: 8px; 
border-bottom-right-radius: 0px; 
border-bottom-left-radius: 0px; 
}

EDIT: CODE NEW !! -> Если вы вставляете HTML-код в документ и помещаете его в папку, делайте то же самое с CSS и поместите его в одну и ту же папку, а затем откройте HTML в IE или GC или FF или что вы используете :)

Теперь я хочу, h1 и первый < р > тег придерживаться в верхней части, когда вы прокрутите вниз в DIV, а второй < р > тег прокручивать вниз.

Возможно ли это, и если да, можете ли вы мне помочь?

Спасибо!
Brent

источник

2016-08-28 Brent Meeusen

Помочь вам с чем? Должны ли мы писать код для вас? Вы видели свойство CSS 'position: fixed;'? –

@ Roko C. Buljan хорошо, если вы можете это сделать, да, пожалуйста! –

Пожалуйста, (возможно, вы его пропустили) читайте [ask], [tour], и в следующий раз обязательно создайте [mcve] своей проблемы. –

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

Для exmaple в этом jsfiddle вы можете прокручивать содержание вниз, но у вас есть заголовок, который закреплен над прокручиваемым div. Это то, что вы можете использовать?

РЕДАКТИРОВАТЬ: Пила, что вы разместили свой код сейчас.

источник

2016-08-28 13:20:28

Нет, это jsfiddle не то, что я ищу. Я не могу иметь h1 и абзац вне div, потому что весь сайт основан на div. Так что это не сработает. Еще спасибо за попытку :) –

Это что-то вроде этого вы хотите сделать? https://jsfiddle.net/gtemkvv9/ –

Я сделал 2 divs в оригинальном div –

<div class="scroll">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div> 


div.scroll { 
background-color: #00FFFF; 
width: 300px; 
height: 200px; 
overflow: scroll; 
margin:10px; 
}

источник

2016-08-28 15:12:32

Прокрутка в DIV?

ответ

Смежные вопросы