Question

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

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

当用户到达我的网页末尾时，标题的高度将会调整回来，我的旁边的填充顶部也会调整。

所以我希望我的旁边上下移动，当我的头部在高度上下收缩时，它会一直上下移动。

这就是我到目前为止......

$(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});

        }

    });

});

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

1 个答案: