1

Работал вот в таком направлении:

/**
 * Прилипающий хеадер
 */
var sticky = $('.navbar-fixed-top');
var defTop = sticky.offset().top;

scrollSticky(sticky, defTop);

$(window).on('resize', function () {
    scrollSticky(sticky, defTop);
});

$(window).on('scroll', function () {
    scrollSticky(sticky, defTop);
});

function scrollSticky(sticky, defTop) {
    if (defTop - ($('body').scrollTop() || $('html').scrollTop()) <= 0) {
        sticky.addClass("sticky-header-play");
        sticky.css("top", $(window).scrollTop() + "px");
    } else {
        sticky.removeClass("sticky-header-play");
    }
}

Все работает все хорошо, за исключением, что на телефонах и в сафари прилипающая шапка не статична, как бы догоняет скролл. Тоесть если прокрутить страницу хеадер догонит нужное место где-то через пол секунды. Такое происходит только на телефонах и в сафари.

Если вы хотите предложить что то типа:

position: fixed 

То это максимально плохое решение, так как при следующих стилях:

.navbar {
    width: 100%;
    min-width: 980px;
    height: 42px;
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    padding: 0px;
    background: linear-gradient(to bottom, #4D8EC2 0px, #4989BF 100%) repeat scroll 0% 0% transparent;
}

если сжать страницу до появления нижнего скрола, все что будет в хеадере за рабочей областью будет обрезано.

Собственно подскажите пожалуйста как решить проблему?

2 ответа 2

1

Этот CSS совершенно нормален.

position: fixed;
z-index: 99;
top: 0px

Так даже в Twitterе сделана эта же верстка.

Чтобы понять почему преждевременная оптимизация зло возьмите httpd-access-log какого-нибудь среднего сайта и посчитайте число User-Agents. Их там будет несколько тысяч если не больше.

Все еще думаете что пытаться сделать сайт который выглядит совершенно одинаково на них всех это здравая идея?

И да, прикрепленная панель в большинстве случаев не нужна. Зачем навязывать кому-то какой-то кусок интерфейса?

1
  • 1) Тз 2) я перфекционист и у меня все должно работать на высшем уровне.
    – Nepster
    2 апр 2015 в 1:02
0

Нашел вот такой плагин: https://github.com/bigspotteddog/ScrollToFixed Вроде все решает, не идеально, но лучшее, что есть.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.