Question

我正在使用相当大的标题，大约180px的网页上工作。为了获得更好的用户体验，我想在用户开始滚动后将标题大小减小到大约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>

Answer 1

让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;
}

在此处查看：http://jsfiddle.net/VLD8G/

现在，您可以根据#header.small规则对您想要的任何内容进行调整。例如：

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

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

或者您想要改变的任何其他内容。而且美妙的是你的JS根本不需要改变。

Answer 2

这是香草js解决方案：

在标题标签中添加id =“ header”
添加CSS

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

添加js

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');
    }
}

滚动后减少标题高度

2 个答案: