jQuery - 向下滚动时收缩的粘滞标题

Question

我想知道当您向下滚动页面时如何制作粘滞标题收缩（使用动画），并在页面向上滚动时返回正常状态。这里有两个例子来clearify：

http://themenectar.com/demo/salient/

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/

在滚动/ touchmove的CSS类 “微小” 被设置为 “#header_nav” 如果“的$（document） .scrollTop（）“大于0.

CSS过渡属性动画”高度“和”背景und“属性。

Answer 3

基于twitter滚动问题（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 4

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

此链接与源代码，你可以玩，展示如何将头较小，以及头本身内作出元素伟大的教程。

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