Значение padding-top, динамически генерируемое из .height

0

Правильно ли я делаю это? поскольку он не работает... $('#page').css('padding-top': ($headerHeight + 'px')); $headerHeight - из var headerHeight = header.height(); ,

Я пытаюсь вычислить высоту #header и установить ее как padding-top для #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/

  • 0
    Что не так с вашим кодом ??? Объясни это
  • 0
    Is $ ('# page'). Css ('padding-top': ($ headerHeight + 'px')); верный? Ничего не делает
Показать ещё 7 комментариев
Теги:

2 ответа

1
Лучший ответ

height() - это метод jquery, поэтому он должен быть:

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

jsFiddle

Поделиться
  • 0
    Это исправило отступы для #page, однако теперь - #header переключается на фиксированный, когда окно достигает своего нижнего, а не верхнего ... почему вы думаете, что это вызвано тем, что?
  • 0
    Я не понимаю, что вы пытаетесь сделать здесь. Разве jsFiddle - это то, что вы ожидаете ?!
1

jQuery.css() ожидает простой объект пар ключ-значение, более того, $ headerHeight не является именем вашей переменной, "headerHeight" is. Поэтому вам следует изменить:

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

от:

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

Это изменение должно выполнить эту работу.

Лучший.

Поделиться
  • 0
    Нет, странная вещь, заголовок работает, если я удалил эту строку выше

Ещё вопросы

Сообщество Overcoder
Наверх
Меню