Мне нужно создать элемент, который скрывается за заголовком при прокрутке (мне нужна отправная точка) - PullRequest
Новая
       17

Мне нужно создать элемент, который скрывается за заголовком при прокрутке (мне нужна отправная точка)

0 голосов
/ 23 мая 2019

Мне сказали создать сворачивающийся элемент (это не панель навигации), подобный тому, который вы можете найти на веб-сайте SBB справа. пример сайта

С помощью CSS Tricks мне удалось создать Div заголовка, который остается на месте. CSS-Tricks Но сейчас я изо всех сил пытаюсь создать элемент с информацией, которая скрывается за заголовком с прокруткой. Я младший разработчик, и у меня просто нет никакой отправной точки. Запись с экрана того, что я ищу

Вот то, что я получил до сих пор, теперь мне нужно заставить зеленый ящик исчезнуть, когда я прокручиваю мимо. Может с переходами? Codepen 

<div class="extra"></div>
<div id="wrapper">
  <div class="sticky">
    sticky
  </div>
  <div class='sticky sticky-subject'>sdjfnsa</div>
</div>
<div class="extra"></div>

. 

    .sticky {
  position: sticky;
  position: -webkit-sticky;
  background: #f83d23;
  width: 100px;
  height: 100px;
  top: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px #000;
  color: #fff;
  z-index: 10;
}
  .sticky-subject{
    z-index: 0;
    top: 170px;
    height: 300px;
    overflow: hidden;
    background-color: green;
  }

.extra,
#wrapper {
  width: 75%;
  margin: auto;
  background-color: #ccc;
  margin-bottom: 60px;
}
#wrapper {
  height: auto;
}
.extra {
  height: 100px;
}
body {
  font-family: georgia;
  height: 1000px;
}
h4 {
  text-align: center;
}
@media (min-height: 768px) {
  #wrapper{
    height: 2000px;
  }
}

Ответы [ 2 ]

0 голосов
/ 23 мая 2019

Я знаю это чувство.

Это зависит от того, какой Frontend-Framework вы используете. Ключи / теги, которые вы ищете, это collapsed navbar on scroll. Если вы используете обычную Bootstrap Navbar , которая рушится на меньших устройствах, тогда вы просто добавляете класс «который позволяет navbar рушиться». Обычный способ - проверить, где находится панель навигации и изменяется ли ее положение. Когда положение панели навигации меняется, вы добавляете свертывающийся класс.

Этот стекопоток ответ поможет вам свернуть панель навигации.

0 голосов
/ 23 мая 2019

Мне нравится 

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll up to show the navbar.</p>
  <p>Lorem ipsum dolor dummy text 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 dummy text 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>
...