Блог

Главная - Вопросы по программированию - Переход содержимого с изменением отрицательного поля

Переход содержимого с изменением отрицательного поля

#javascript #jquery #html #css #animation

#javascript #jquery #HTML #css #Анимация

Вопрос:

Я пытаюсь решить проблему с переходом моего содержимого после анимации навигации, которая уменьшается по высоте при прокрутке.

Навигация является липкой, а содержимое под ней имеет отрицательное поле, равное высоте панели навигации. Изменение высоты выполняется путем добавления и удаления классов с помощью jQuery с меньшим заполнением. Анимация работает, как и ожидалось, но когда она завершается, содержимое увеличивается на ту же величину, что и уменьшение отступов.

Есть ли способ предотвратить скачок содержимого и просто плавное перемещение вверх?

Я пытался добавлять переходы во все возможные контейнеры, но безрезультатно. 

 JS
/* shrink nav and hide global header */
    window.onscroll = function() {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
            $('#responsive-menu').addClass('shrink-nav');

        } else {
             $('#responsive-menu').removeClass('shrink-nav');
        }
    }
  
 CSS
#banner-wrapper{
    margin: -184 0 0 0;
}
#responsive-menu{
    padding: 50px 0 40px 0;
    transition: all 0.35s ease;
}
#responsive-menu.shrink-nav{
    padding:10px 0 !important;
    transition: all 0.35s ease;
}

структура html

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta content="IE=Edge" http-equiv="X-UA-Compatible"/>
</head>
<body>

<div data-sticky-container="">
  <div class="contain-to-grid" data-sticky="" data-sticky-on="small" id="header-bar">
    <div class="grid-container full" id="global-header">

    </div>
    <div class="grid-container full" id="nav-main">
      <div class="grid-container">
        <div class="title-bar" data-hide-for="large" data-responsive-toggle="responsive-menu">
          <div class="title-bar-left">
            <div class="title-bar-title"><a href="index.php"></div>
          </div>
          <div class="title-bar-right"><a class="button show-for-medium-only" href="apply-now.php">apply now</a>
            <button aria-label="toggle navigation menu" class="menu-icon right" data-toggle="responsive-menu" type="button"></button>
            <div class="title-bar-title show-for-medium-only">menu</div>
          </div>
        </div>
        <div class="top-bar" id="responsive-menu">
          <div class="top-bar-left show-for-large">
            <ul class="dropdown menu" data-dropdown-menu="">
              <li class="menu-text"></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="vertical medium-horizontal menu" data-closing-time="10" data-hover-delay="15" data-responsive-menu="accordion medium-dropdown">
              <li class="opens-right"><a href="/programs/">menu</a>
                <ul class="menu accordion" data-accordion-menu="">
                  <li class="show-for-small-only">item</li>
                  <li class="show-for-small-only">item</li>
                    <li class="show-for-small-only">item</li>
                    <li class="show-for-small-only">item</li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="grid-container full  banner-margin" data-banner-type="video"  data-vide-options="posterType:'none',autoplay:false,muted:true" id="banner-wrapper">
  <div class="grid-container full" id="banner">
    <div class="grid-container" id="banner-content-wrapper">
      <div class="text-center" id="banner-content">
        <h1> You’re one degree closer.</h1>
        <h2 class="sub-header">Never stop learning.</h2>


        <form action="programs/" method="get" id="finder" class="finder-home" name="finder">
          <div class="grid-container">
            <div class="grid-x grid-padding-x">
              <div class="cell small-12 large-4">                 
              </div>
              <div class="cell small-12 large-4">
              </div>
              <div class="cell small-12 large-4">
                <input type="submit" value="find" aria-label="Submit"  class="button" />
              </div>
            </div>
          </div>
        </form>
      </div>
      <button aria-label="Video is playing. Select to Pause Video." aria-pressed="false" class="video-control" id="videoBannerPause"></button>
    </div>
  </div>
</div>
<div class="grid-container">
  <div class="grid-x">
    <div class="cell ">
      <div class="grid-container">
        <div class="cell small-12">
          <p class="intro-subhead">Cras vitae pulvinar lacus. Proin porta tristique nibh. Curabitur ultricies pulvinar dolor, ac vehicula est elementum in</p>
        </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

Было бы здорово, если бы нашлось решение, позволяющее не скачивать содержимое для удаления примерно на 50 пикселей. #отзывчивое меню

Комментарии:

1. Можете ли вы включить свой HTML?

2. Я добавляю html выше

3. Это может быть закрыто. Я использую foundation 6, и проблема связана с их реализацией sticky nav. Даже в их обучающих видеороликах есть проблема.