将主要内容保留在固定标题下

Question

对 jQuery 很陌生，如果这是基本的，请见谅。

我希望我的主要内容包装器始终位于固定标题下方。如果固定标头始终具有相同的高度，这将是可以的，但它是响应式的并且它的高度会发生变化。

这是我迄今为止的 jQuery（不起作用）：

var banner = $('div.banner');
var wrapper = $('div.wrapper');

wrapper.offset().top = banner.outerHeight() + wrapper.offset().top;

我认为通过在任何给定时刻将wrapper.offset().top 定义为与横幅高度相同的值，这将起作用。可惜没有。

任何帮助将不胜感激。

Answer 1

您可以将其包装在 doc ready 块中并使用css() 方法设置top 属性：

function setHeader(){
    var banner = $('div.banner');
    var wrapper = $('div.wrapper');

    wrapper.css('top', banner.outerHeight() + wrapper.offset().top);
}
$(function(){
    var time;
        time = setTimeout(function(){
           if(time){ clearTimeout(time);}
           $(window).resize(setHeader).trigger('resize');
        }, 700);

});