从 .height 动态生成的填充顶部值

The padding-top value dynamicly generated from .height

本文关键字:填充 顶部 height 动态      更新时间:2023-09-26

我这样做正确吗? 因为它不起作用... $('#page').css('padding-top': ($headerHeight + 'px')); $headerHeight来自var headerHeight = header.height();.

我正在尝试计算 #header 的高度并将其设置为填充顶部以进行 #page

//Sticky header on offset
var header = document.querySelector('#header.sticky');
var headerOffset = header.offsetTop;
var headerHeight = header.height();
function scroll () {
    if ($(window).scrollTop() >= headerOffset) {
        $('#header').css({'position':'fixed','top':'0','left':'0','right':'0','z-index':'9999',});
        $('#page').css('padding-top': ($headerHeight + 'px'));
    } else {
        $('#header').css({'position':'relative'});
        $('#page').css('padding-top': '0');
    }
} document.onscroll = scroll;

这是一个小提琴:http://jsfiddle.net/f4LPz/3/

height()是一个jquery方法,所以它应该是:

var $headerHeight = $(header).height();

js小提琴

jQuery .css(( 需要一个键值对的普通对象,而且$headerHeight不是变量的名称,"headerHeight"是。所以你应该改变:

$('#page').css('padding-top': ($headerHeight + 'px'));

由:

$('#page').css({'padding-top': (headerHeight + 'px')});

这种变化应该可以完成工作。

最好。