Question

我正在尝试解决一个动画，该动画是在导航时滚动滚动时高度会缩小，而内容却跳了起来。

导航键是粘性的，其下面的内容的负边距与导航条的高度相同。高度的更改是通过使用填充较小的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像素就删除，那就太好了。＃response-menu

内容随着负边距的变化而跳跃

0 个答案: