Проблема показана ниже:
Проблема становится очевидной при нажатии кнопки - верхнюю часть страницы больше не видно.Появляется вертикальная полоса прокрутки, но она не позволяет прокрутить достаточно далеко вверх.Я ожидаю (хочу), чтобы заголовок был перемещен в верхнюю часть страницы, но не дальше.
Проблема присутствует даже без нажатия кнопки - измените размер окна достаточно маленьким,и вы снова теряете часть страницы.
Я подозреваю, что проблема связана с тем, как используются гибкие коробки, но я не смог найти способпочини это.Возможно, что проблема связана с функцией изменения размера, но это не объясняет второй пункт выше (не так ли?).
В идеале, я бы хотел, чтобы появилась вертикальная полоса прокрутки (при изменении размера окна и / или кнопкинажмите), чтобы позволить пользователю по-прежнему видеть все содержимое страницы.Первый div (содержащий заголовок) будет затем «подталкиваться» вверх к верху страницы.
function collapseSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// temporarily disable all css transitions
var elementTransition = element.style.transition;
element.style.transition = '';
// on the next frame (as soon as the previous style change has taken effect),
// explicitly set the element's height to its current pixel height, so we
// aren't transitioning out of 'auto'
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
element.style.transition = elementTransition;
// on the next frame (as soon as the previous style change has taken effect),
// have the element transition to height: 0
requestAnimationFrame(function() {
element.style.height = 0 + 'px';
});
});
// mark the section as "currently collapsed"
element.setAttribute('data-collapsed', 'true');
}
function expandSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// have the element transition to the height of its inner content
element.style.height = sectionHeight + 'px';
// when the next css transition finishes (which should be the one we just triggered)
element.addEventListener('transitionend', function(e) {
// remove this event listener so it only gets triggered once
element.removeEventListener('transitionend', arguments.callee);
// remove "height" from the element's inline styles, so it can return to its initial value
element.style.height = null;
});
// mark the section as "currently not collapsed"
element.setAttribute('data-collapsed', 'false');
}
document.querySelector('#toggle-button').addEventListener('click', function(e) {
// var section = document.querySelector('.section.collapsible');
var section = document.getElementById("ohhai");
var isCollapsed = section.getAttribute('data-collapsed') === 'true';
if (isCollapsed) {
expandSection(section);
section.setAttribute('data-collapsed', 'false');
} else {
collapseSection(section);
section.setAttribute('data-collapsed', 'true');
}
});
html,
body {
background-color: #fff;
color: #636b6f;
font-weight: 100;
height: 100vh;
margin: 0;
}
.slide-open {
transition: all 1s ease;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.content {
text-align: center;
}
.links>a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
margin-bottom: 10px;
}
.email>a {
color: #636b6f;
padding: 0 25px;
font-size: 24px;
font-weight: 600;
letter-spacing: .2rem;
text-decoration: none;
text-transform: lowercase;
white-space: nowrap;
}
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="flex-center position-ref full-height">
<div class="content">
<div class="row">
<div class="col-12">
<div class="m-b-md" style="font-size: 84px; margin-bottom: 30px;">
What a Heading!
</div>
</div>
<div class="col-12">
<div class="links">
<a>sub-point 1</a>
<a>sub-point 2</a><br>
<a>sub-point 3</a>
<a>sub-point 4</a>
<a>sub-point 5</a>
</div>
</div>
<div class="col-12"> </div>
<div id="ohhai" class="col-12 slide-open" style="overflow: hidden; display: inline-block; min-height: 0 !important; height: 0; " data-collapsed="true">
<div class="links">
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
<a>some nice blurb about things...</a><br>
</div>
</div>
<div class="col-12"> </div>
<div class="col-12">
<div class="email">
<a>oh@hai.lolz</a>
</div>
</div>
</div>
<div class="col-12"> </div>
<button id="toggle-button">toggle</button>
</div>
</div>
</div>
Показать на Bootply