当标题的大小（宽度/高度）调整时元素填充调整答案

【问题标题】：elements padding adjust when the size (width/height) of header adjusts当标题的大小（宽度/高度）调整时元素填充调整
【发布时间】：2014-07-25 22:25:33
【问题描述】：

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

我有一个标题，当缩小（高度）时，我的侧边菜单的填充（即填充顶部）将随之调整。

当用户到达我的网页末尾时，header 的高度会调整回来，我的 side 的 padding-top 也会随之调整。

所以我希望我的侧边可以上下移动，当它的高度上下收缩时，我的头部也可以上下移动。

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

$(document).ready(function(){

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

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

});

【问题讨论】：

如果可能的话，为它准备 jsfiddle

标签： javascript jquery css jquery-animate animate.css

【解决方案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});

        }

    });

});

【讨论】：