Jquery 滚动后降低页眉高度

我正在制作一个标题相当大的网页，大约180像素。为了更好的用户体验，一旦用户开始滚动，我想将标题的大小减小到100px左右，到目前为止一切都很顺利，但是，我似乎无法让徽标将标题中的徽标大小减小到很好，或者至少是背景大小，有什么想法吗

代码如下—

<script>
$(function(){
    $('#header').data('size','big');
});

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

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










<script>
$(function(){
$('#logo').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#logo').data('size') == 'big')
    {
        $('#logo').data('size','small');
        $('#logo').stop().animate({
            width:'59px',height:'63px'
        },600);
    }
}
else
{
    if($('#logo').data('size') == 'small')
    {
        $('#logo').data('size','big');
        $('#logo').stop().animate({
            width:'128px',height:'120px'
        },600);
    }  
}
});$(function(){
$('#logo').data('size','big');
});

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#logo').data('size') == 'big')
    {
        $('#logo').data('size','small');
        $('#logo').stop().animate({
            width:'59px',height:'63px'
        },600);
    }
}
else
{
    if($('#logo').data('size') == 'small')
    {
        $('#logo').data('size','big');
        $('#logo').stop().animate({
            width:'128px',height:'120px'
        },600);
    }  
}
});
</script>

$（函数（）{
$（'标题'）.data（'大小'，'大'）；
});
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>0）
{
if（$（'#header'）.data（'size'）=='big'）
{
$（'标题'）.data（'大小'，'小'）；
$（“#标题”）.stop（）.animate({
高度：'100px'
},600);
}
}
其他的
{
如果（$（'#标题'）。数据（'size'）=='small'）
{
$（'标题'）.data（'大小'，'大'）；
$（“#标题”）.stop（）.animate({
高度：'180px'
},600);
}  
}
});$（功能（）{
$（'标题'）.data（'大小'，'大'）；
});
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>0）
{
if（$（'#header'）.data（'size'）=='big'）
{
$（'标题'）.data（'大小'，'小'）；
$（“#标题”）.stop（）.animate({
高度：'100px'
},600);
}
}
其他的
{
如果（$（'#标题'）。数据（'size'）=='small'）
{
$（'标题'）.data（'大小'，'大'）；
$（“#标题”）.stop（）.animate({
高度：'180px'
},600);
}  
}
});
$（函数（）{
$（'#logo'）。数据（'size'，'big'）；
});
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>0）
{
如果（$（“#logo”）.data（'size'）=='big'）
{
$（'#logo'）。数据（'size'，'small'）；
$（“#徽标”）.stop（）.animate({
宽度：'59px'，高度：'63px'
},600);
}
}
其他的
{
如果（$（'#logo'）。数据（'size'）=='small'）
{
$（'#logo'）。数据（'size'，'big'）；
$（“#徽标”）.stop（）.animate({
宽度：'128px'，高度：'120px'
},600);
}  
}
});$（功能（）{
$（'#logo'）。数据（'size'，'big'）；
});
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>0）
{
如果（$（“#logo”）.data（'size'）=='big'）
{
$（'#logo'）。数据（'size'，'small'）；
$（“#徽标”）.stop（）.animate({
宽度：'59px'，高度：'63px'
},600);
}
}
其他的
{
如果（$（'#logo'）。数据（'size'）=='small'）
{
$（'#logo'）。数据（'size'，'big'）；
$（“#徽标”）.stop（）.animate({
宽度：'128px'，高度：'120px'
},600);
}  
}
});

让CSS完成所有工作。用javascript编码这样的动画会带来各种各样的痛苦

您的JS应该如此简单：

$(window).scroll(function(){
    if($(document).scrollTop() > 0) {
        $('#header').addClass('small');
    } else {
        $('#header').removeClass('small');
    }
});

CSS设置两种状态，以及它们之间的转换方式：

#header {
    position: fixed;
    top: 0;
    background: #888;
    color: white;
    font-size: 30px;
    height: 60px;
    width: 100%;

    transition: font-size 0.5s, height 0.5s;
    -webkit-transition: font-size 0.5s, height 0.5s;
    -moz-transition: font-size 0.5s, height 0.5s;

}

#header.small {
    font-size: 15px;
    height: 30px;
}

请在此处查看它的工作情况：

现在，您可以通过

#header.small

规则来定义任何需要不同的内容。例如：

#header .logo {
  width: 100px;
  height: 100px;
}

#header.small logo {
  width: 50px;
  height: 50px;
}

---

或者任何你想改变的东西。最美妙的是，你的JS根本不需要改变。

这里是一个香草JS解决方案：

将id=“header”添加到页眉标记

添加css

添加js

---

你所说的“我似乎无法让徽标缩小尺寸”是什么意思？会发生什么情况，收割台会减少吗？你能提供一个提琴吗？请提供一个提琴并粘贴你的HTML代码。我的标题缩小了，尽管出于某种原因它在我的JSFIDLE上不起作用，但问题是我的徽标缩小了，但是背景大小似乎没有改变，留下了一个裁剪过的徽标。我要在我原来的问题上加上一句话@LcsalazarThank@Alex Wayne似乎有道理。我会让你知道我的进展！非常感谢你的帮助。宾果！很有魅力@Alex Wayne非常感谢，非常感谢。

#header {
  height: 100px;
  transition: height .3s ease-in-out
}
.header_small {
  height: 50px;
}

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    const $header = document.getElementById('header');
    if (!$header) {
        return;
    }
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
        $header.classList.add('header_small');
    } else {
        $header.classList.remove('header_small');
    }
}