javascript - 当标题的大小(宽度/高度)调整时，元素填充会调整

Question

所以我在我的网站上工作，但我仍然无法掌握 JavaScrip 或如何真正使用它。

我有一个标题，当缩小时(高度明智)，我旁边菜单的填充(即填充顶部)将随之调整。

当用户到达我的网页末尾时，页眉的高度会向后调整，我的 aside 的 padding-top 也会随之调整。

所以我希望我的旁边上下移动，当它的高度上下收缩时，我的标题也会上下移动。

这就是我目前所拥有的......

$(document).ready(function(){

var hh = $('header').height();

$('aside').css('padding-top', hh)

});

Answer 1

没有测试，这是我想到的。它可能会奏效，或者至少会把你推向正确的方向!

$(function() {

    var shrinkHeight = 20,
        originalHeaderHeight = $('header').outerHeight(),
        originalAsidePaddingTop = parseInt($('aside').css('padding-top').slice(0, -2), 10);

    $('body').scroll(function() {

        var distanceScrolled = $(this).scrollTop();

        if(distanceScrolled > 1) {

            $('header').stop().animate({
                height: (originalHeaderHeight - shrinkHeight) + 'px'
            }, {duration: 200, queue: false});

            $('aside').stop().animate({
                paddingTop: (originalAsidePaddingTop - shrinkHeight) + 'px'
            }, {duration: 200, queue: false});

        }
        else {

            $('header').stop().animate({
                height: originalHeaderHeight + 'px'
            }, {duration: 200, queue: false});

            $('aside').stop().animate({
                paddingTop: originalAsidePaddingTop + 'px'
            }, {duration: 200, queue: false});

        }

    });

});