首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery -向下滚动时缩小的粘性标题

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

Stack Overflow用户
提问于 2013-05-08 21:28:47
回答 6查看 150.9K关注 0票数 75

我想知道如何在向下滚动页面时使粘性标题收缩(带有动画),并在页面向上滚动到顶部时恢复到正常状态。这里有两个要澄清的例子:

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

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

我得到的部分,使它固定,但我应该如何做,以缩小我的标题时,用户向下滚动?

万分感谢

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2013-05-08 21:50:06

这应该是您使用jQuery所要查找的内容。

代码语言:javascript
复制
$(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/

票数 106
EN

Stack Overflow用户

发布于 2013-09-03 15:06:50

这里是jezzipin解决方案的CSS动画分支,用于分离代码和样式。

JS:

代码语言:javascript
复制
$(window).on("scroll touchmove", function () {
  $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
});

CSS:

代码语言:javascript
复制
.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转换属性可以很好地为"height“和”nicely“属性设置动画效果。

票数 88
EN

Stack Overflow用户

发布于 2014-10-17 18:39:28

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

这个链接有一个很好的源代码教程,展示了如何使头部中的元素变得更小,以及头部本身。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16442016

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档