Форум

Nlk · #**141** (**permalink**) 03.01.2018, 21:04

рони,
спасибо. Работает)

Nlk · #**142** (**permalink**) 09.01.2018, 13:42

Ребята, объясните пожалуйста, почему так получается что при наведении курсора на область с position:fixed и прокручивании, страница остаётся неподвижной. А при наведении курсора в любую другую область сайта при скроле всё нормально прокручивается.

Nexus · #**143** (**permalink**) 09.01.2018, 13:48

Nlk, можно пример?
https://jsfiddle.net/uyh6exyj/

Nlk · #**144** (**permalink**) 09.01.2018, 15:06

В коде приведённом ниже скрыт скролл страницы, это нужно оставить.

Nexus · #**145** (**permalink**) 09.01.2018, 15:10

Nlk,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Nlk · #**146** (**permalink**) 09.01.2018, 15:29

Извиняюсь, поправил.

<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><style>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	min-height: 100%;
}
body{
	overflow: hidden;
}
.wrap {
	overflow-y: scroll;
	width: calc(100% + 9px);
	position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
}
.page {
	height: 100vh; 
	width: 100%; 
}
.active {
	position: fixed; 
	top: 0;
	height: 100px;
}


.page:nth-of-type(1) {background-color:#cccccc;}
.page:nth-of-type(2) {background-color:#afafaf;}
.page:nth-of-type(3) {background-color:#737373;}
.page:nth-of-type(4) {background-color:#404040;}

</style></head><body>
	
	
<section class="wrap">
	<section class="page active"></section>
	<section class="page"></section>
	<section class="page"></section>
	<section class="page"></section>
</section>
	
</body></html>

Nlk · #**147** (**permalink**) 10.01.2018, 16:25

Альтернативное решение использовать position:sticky, правда его поддержка браузерами не так хороша.

Nexus · #**148** (**permalink**) 10.01.2018, 16:31

Nlk, в какой ситуации потребовалось растягивать блок с контентом на весь экран и его потомка фиксировать сверху?

Nlk · #**149** (**permalink**) 10.01.2018, 17:05

Nexus,
Full Page Slider, реализация может и своеобразная, но вопрос лишь в этом моменте.

Nexus · #**150** (**permalink**) 10.01.2018, 17:08

Nlk, не проще просто растянуть высоту обертки, отказавшись от её абсолютного позиционирования?

Форум

Справочник

Discord чат

Курсы javascript