javascript - 从 .height 动态生成的 padding-top 值

标签 javascript jquery

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

我正在尝试计算#header的高度并将其设置为#page的padding-top

//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;

这是一个 fiddle :http://jsfiddle.net/f4LPz/3/

最佳答案

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

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

jsFiddle

关于javascript - 从 .height 动态生成的 padding-top 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23322097/

相关文章:

javascript - 追加后滚动 LI 不隐藏

javascript - 如何在 javascript 中使用 API 捕获 Youtube 播放器的拖动/跳过/转发事件

javascript - 如何在 React 中使用 forwardRef()?

JavaScript 移动字符。单击右箭头更改图像

javascript - 为什么 javascript 函数每次调用都有实例?

jquery - 如何在 Bootstrap 日期分页器中只显示一个元素

jquery - 错误 :Request header field Content-Type is not allowed by Access-Control-Allow-Headers

jquery - Bootstrap CSS - 缩略图图像调整大小和响应式

javascript - 自动完成仅匹配单词开头

javascript - 引导模态确认