Добавить эффект заголовка прокрутки / переход со свойством position

0

У меня есть заголовок, position:absolute которого position:absolute нагрузка Мне нужно отобразить это исправление на определенной прокрутке, чтобы оно работало..

но проблема в том, что я использую эффект заголовка (т.е. отображение с задержкой вверх) с position:fixed свойство.

код:

CSS

.iaw-header {
    position:absoulte
}

JS:

{
    if (jQuery(window).scrollTop() >= 700) {
       jQuery('.iaw-header').css('position','fixed');
    });   
}
  • 0
    Пожалуйста, разместите свой код в сообщении, и не используйте сокращатель. Делает ссылку подозрительной.
  • 1
    Я думаю, что вы имеете в виду position когда вы говорите, display .
Показать ещё 1 комментарий
Теги:

2 ответа

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

HTML

<div id="header">
    Header text here.
</div>

CSS

.header { position: absolute; }

JS

if (jQuery(window).scrollTop() >= 700) {
    $('#header').css('top', '-300px'); 
    $('#header').css('position', 'fixed'); 
    $('#header').animate({top: 0}, 1000);
} else {
    $('#header').animate({top: '-300px'}, 1000, function () {
        $('#header').css('top', 0); 
        $('#header').css('position', 'absolute'); 
    });
}

Поэтому, когда сайт загружается (в CSS), заголовок может иметь top: -300px; , и когда пользователь прокручивает, вы переходите (или устанавливаете) верх заголовка на 0px, чтобы он прокручивался сверху.

Поделиться
  • 0
    нет, братан, мне нужно, чтобы он находился на верхней позиции, когда его прокрутка вниз на 700, тогда он зафиксирован, все работает, я просто путаюсь в эффекте заголовка
  • 0
    Проверьте мой ответ еще раз.
Показать ещё 11 комментариев
0 
   $(window).scroll(function () {
    var i = $('.iaw-header')
    var h = i.outerHeight(true);
    if ($(window).scrollTop() > h) {
        if (!i.hasClass('fixed')) i.hide().addClass('fixed');
    }
    if ($(window).scrollTop() >= 400) {
        i.slideDown('fast');
    } else {
        i.removeClass('fixed').show();
    }
});

Добавьте класс в свой стиль:

.fixed {position: fixed;top:0; left:0;width: 100%; }

Возможно, это не лучший код, но вы можете начать строить его и модифицировать, чтобы сделать его лучше. Вот ссылка Jsfiddle: http://jsfiddle.net/lotusgodkk/gxRC9/200/

Поделиться
  • 0
    Это работает, я просто спрашиваю про эффект заголовка вот так tympanus.net/codrops/2013/07/16/on-scroll-header-effects
  • 0
    на 700, когда она зафиксирована, поэтому она должна появляться с эффектом сверху вниз с задержкой
Показать ещё 1 комментарий

Ещё вопросы

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