Question

我想知道当你向下滚动页面时如何使一个粘性标题收缩（带动画），并在页面向上滚动到顶部时返回到正常状态。以下是两个要澄清的例子：

http://www.kriesi.at/themes/enfold/

我得到了修复它的部分，但是当用户向下滚动时我该如何缩小标题呢？

非常感谢

Answer 1

这应该是你正在寻找使用jQuery。

$(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);
      }  
  }
});

演示： http://jsfiddle.net/jezzipin/JJ8Jc/

Answer 2

这是一个jezzipin解决方案的CSS动画分支，用于从样式中分离代码。

JS：

$(window).on("scroll touchmove", function () {
  $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
});

CSS：

.header {
  width:100%;
  height:100px;
  background: #26b;
  color: #fff;
  position:fixed;
  top:0;
  left:0;
  transition: height 500ms, background 500ms;
}
.header.tiny {
  height:40px;
  background: #aaa;
}

http://jsfiddle.net/sinky/S8Fnq/

在滚动/触摸移动时，如果“$（document）.scrollTop（）”大于0，则css类“tiny”设置为“#header_nav”。

CSS过渡属性很好地动画了“高度”和“背景”属性。

Answer 3

http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

这个链接有一个很棒的教程，你可以使用源代码，展示如何使标题内的元素和标题本身更小。

Answer 4

基于推特滚动问题（http://ejohn.org/blog/learning-from-twitter/）。

这是我的解决方案，限制js滚动事件（对移动设备有用）

JS：

$(function() {
    var $document, didScroll, offset;
    offset = $('.menu').position().top;
    $document = $(document);
    didScroll = false;
    $(window).on('scroll touchmove', function() {
      return didScroll = true;
    });
    return setInterval(function() {
      if (didScroll) {
        $('.menu').toggleClass('fixed', $document.scrollTop() > offset);
        return didScroll = false;
      }
    }, 250);
  });

CSS：

.menu {
  background: pink;
  top: 5px;
}

.fixed {
  width: 100%;
  position: fixed;
  top: 0;
}

HTML：

<div class="menu">MENU FIXED ON TOP</div>

http://codepen.io/anon/pen/BgqHw

Answer 5

我做了jezzipin答案的升级版本（我正在设置填充顶部而不是高度，但你仍然明白这一点。

 /**
 * ResizeHeaderOnScroll
 *
 * @constructor
 */
var ResizeHeaderOnScroll = function()
{
    this.protocol           = window.location.protocol;
    this.domain             = window.location.host;
};

ResizeHeaderOnScroll.prototype.init    = function()
{
    if($(document).scrollTop() > 0)
    {
        $('header').data('size','big');
    } else {
        $('header').data('size','small');
    }

    ResizeHeaderOnScroll.prototype.checkScrolling();

    $(window).scroll(function(){
        ResizeHeaderOnScroll.prototype.checkScrolling();
    });
};

ResizeHeaderOnScroll.prototype.checkScrolling    = function()
{
    if($(document).scrollTop() > 0)
    {
        if($('header').data('size') == 'big')
        {
            $('header').data('size','small');
            $('header').stop().animate({
                paddingTop:'1em',
                paddingBottom:'1em'
            },200);
        }
    }
    else
      {
        if($('header').data('size') == 'small')
        {
            $('header').data('size','big');
            $('header').stop().animate({
                paddingTop:'3em'
            },200);
        }  
      }
}

$(document).ready(function(){
    var resizeHeaderOnScroll = new ResizeHeaderOnScroll();
    resizeHeaderOnScroll.init()
})

Answer 6

我接受了Jezzipin的回答，并提出了这样的要求，以便刷新页面时如果滚动您的页面，则会应用正确的尺寸。还删除了一些不必要的东西。

void setup()
{ 
    pinMode(13, OUTPUT);
}

void loop()
{
    int n=1;
    while (n<=5) 
    {
        digitalWrite(13, HIGH);
        delay(500);
        digitalWrite(13, LOW);
        delay(500);
    }

    while (n<=10)
    {
        digitalWrite (13, HIGH);
        delay (2000) ;
        digitalWrite(13, LOW) ;
        delay(2000) ;
    }

jQuery - 向下滚动时缩小的标题

6 个答案: