Question

我目前正在创建一个个人网站，我想在网站加载时获得一个完整的高度标题。当用户向下滚动时，此标题应设置其高度的动画，并且标题下方的内容应同步移动到标题的动画。并且标题应该固定在最后。我把一切都搞定了，在固定位置旁边。动画结束时闪烁。

我创造了一个小提琴，所以你会明白我的意思更容易。

http://jsfiddle.net/30j5njrw/10/`

提前感谢您提供任何帮助

此致

编辑：到目前为止我尝试了几个方法，比如添加从头开始固定的位置，或者尝试通过jQuery在滚动中定位标题内容......但我从来没有得到我想要的结果。

EDIT2：如果有人知道具有类似效果的网站，请分享。

EDIT3：由于到目前为止没有人遇到我的问题，我会尝试更详细地描述它。

我有标题和内容区域。页面加载时，标题设置为视口的完整高度。此标头此时使用静态css定位，因此内容区域正确定位在视口外的标题下方。

如果我向下滚动，标题会缩小，标题内容的某些css会动画显示。内容区域现在必须使用标题下的箭头向上移动，并且在动画结束时应该修复标题。

到目前为止，您的所有示例都不关心标题下方的内容流。

Edit4：

haxxxton回答了这个问题，解决方案看起来比我实际想要的还要好。因此，当24小时结束时，我将以赏金奖励他。

Edit5

实际上haxxxtons的答案并没有解决我的问题。我很惊讶我监督了一些问题。箭头必须是内容部分的一部分，因为最终网站下面会有更多内容部分。我提出了另一个解决方案，但我也陷入困境。现在我认为这甚至不可能做到。这是我小提琴的更新版本：

http://jsfiddle.net/30j5njrw/14/

由于我无法对scroll事件执行preventDefault（），因此箭头仍然无法正常移动。当标题的高度不是165px时，我需要在滚动事件期间执行preventDefault（）。根据google上发现的不同来源，不可能对scroll事件执行preventDefault（）。我可能会尝试在滚动事件期间播放内容区域的填充，使其看起来不滚动。但我不认为我想要的效果实际上是可能的。

Edit6：

它可以将内容区域的填充设置为滚动偏移的像素。看到新的小提琴：

Fiddle update

但仍有问题。当你滚动得非常快时，它会以某种方式闪烁，并且页脚的位置很奇怪。但我不知道你是否可以使用任何其他输入设备快速滚动，而不是MacBook的魔术触摸板，所以如果我在几个小时内没有找到解决方案，我可能会忽略这个问题。

Answer 1

这是因为当用户向下滚动第一个实例（触发动画）时，你让他们继续滚动，然后将position:fixed;应用到你的标题..这使它'跳'下来页面。

解决方案，实际上是你已经尝试过的东西;从头部开始position:fixed，然后从那里制作动画。

首先将fixed应用于标题，其他元素似乎不会在稍后“捕捉”。

我发现在标题中添加'arrow'元素会停止明显的捕捉（我假设你打算一直在那里）。

JSFIDDLE DEMO

<强> CSS

body {
    text-align: center;
}
.clear {
    clear: both;
}
h1 {
    margin-top: 4px;
}
h1 p {
    font-size: 18px;
    margin: 5px 0 10px 0;
}
h2 {
    margin-bottom: 50px;
}
h1, h2, h3, h4 {
    text-align: center;
}
.white, .white * {
    background-color: #ffffff;
    border-color: #2d2d2d;
    color: #2d2d2d;
}
.dark, .dark * {
    background-color: #2d2d2d;
    border-color: #ffffff;
    color: #ffffff;
}
#top {
    top: 0;
    text-align: center;
    width: 100%;
    position:fixed;
    overflow: visible !important;
    z-index: 1000;
}
#top .arrow{
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color:white;
    height: 20px;
    margin: 0 0 0 -30px;
    width: 60px;
    position:absolute;
    top:100%;
    left:50%;
    background-color:transparent;
}
#top p.slogan {
    font-family:'Poiret One', cursive;
    margin-top: 50px;
    font-size: 20px;
}
#top a {
    display: block;
    font-family:'Poiret One', cursive;
    font-size: 20px;
    text-align: center;
    width: 117px;
}
#top a:hover {
    color: #767676;
    text-decoration: none;
}
#top nav {
    float: right;
    left: -50%;
    margin-top: 35px;
    position: relative;
    text-align: left;
}
#top ul {
    left: 50%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
#top li {
    float: left;
    margin: 0 5px;
    position: relative;
    width: 100px;
}
#contact {
    padding-top:215px;
    height: 1300px;
}

<强> JS

$( document ).ready(function() {
    changeHeaderHeight();
    var lastScrollTop = 0;
    var isAnimationFinished = true;
    var isScrolled = $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        if (isAnimationFinished == true) {
            isAnimationFinished = false;
            topHeight = $('#top').height() - scrollTop;
            $('#top h1').animate({
                fontSize: '14px'
            },500);
            $('#top h1 p').fadeOut();
            $('#top p.slogan').fadeOut();
            $('#top').animate({
                height: 165 + 'px'
            },1000);
            $('#main-navigation').animate({
                marginTop: 5 + 'px',
            },1000);
            $('#main-navigation a').animate({
                width: '97px',
                fontSize: '16px',
            },1000);
            $('#main-navigation li').animate({
                width: '97px'
            },1000);
        }
        lastScrollTop = scrollTop;
    });
    $.when(isScrolled).then(function() {
        if ($('#top').height() == 165) {
            isAnimationFinished = true;

        }
    });



});
$(window).resize(function() {
    changeHeaderHeight();
});
function changeHeaderHeight() {
    var viewportHeight = $(window).height();
    $('header#top').height(viewportHeight);
}

<强> HTML

<body data-spy="scroll" data-target="#main-navigation">
  <header id="top" class="white">
    <h1>
      Title
      <p>
        ...slogan goes here
      </p>
    </h1>
    <nav id="main-navigation">
      <ul data-spy="affix" data-offset-top="155" class="nav">
        <li>
          <a href="#news" title="News">
            News
          </a>
        </li>
        <li>
          <a href="#agency" title="Agentur">
            Agentur
          </a>
        </li>
        <li>
          <a href="#services" title="Leistungen">
            Leistungen
          </a>
        </li>
        <li>
          <a href="#portfolio" title="News">
            Portfolio
          </a>
        </li>
        <li>
          <a href="#contact" title="News">
            Kontakt
          </a>
        </li>
      </ul>
    </nav>
    <div class="clear"></div>
    <p class="slogan">
      Blabla
    </p>
    <p class="slogan">
      More Blabla
    </p>
    <div class="arrow">
    </div>
  </header>
  <section id="contact" class="dark">
    <header>
      <h2>
        Contact
      </h2>
    </header>
  </section>
  <footer class="white">
    <a class="scroll-top" href="#top">
      Logo
    </a>
  </footer>
</body>

Answer 2

这是另一个堆栈溢出问题，它询问类似的东西：jQuery - Sticky header that shrinks when scrolling down

接受的答案有以下代码：

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});

这个JS Fiddle的例子。 http://jsfiddle.net/jezzipin/JJ8Jc/

滚动缩小标题并同步移动内容

2 个答案: