Положение баннера при изменении размера окна с помощью липкой навигации

Question

Положение баннера при изменении размера окна с помощью липкой навигации

0

Я столкнулся с проблемой с липким навигационным/баннерным дуэтом, который я пытаюсь реализовать. Проверьте это здесь: http://lucid-build.com/stack/sticky/ Проблема заключается в том, что при изменении размера окна позиция баннера отключена. В противном случае он действует так, как он предполагал. Любые предложения о том, как исправить это, будут очень признательны!

[edit] здесь скрипт!

function resizeBanner() {
    var bannerH = $(".banner img").height();
    $(".banner").css("height", bannerH);
}

function fixedNav() {
    var logoT = $(".logo").offset().top;
    var bannerH = $(".banner img").height();

    $(window).scroll(function() {
        if($(window).scrollTop() > logoT ) {
            $("#header").addClass("fixed").css(("height"),120);
            $(".banner").css(("margin-top"),-bannerH+120);
            $("body").css(("margin-top"),bannerH+18);       
        } else {
            $("#header").removeClass("fixed").css(("height"),("auto"));
            $(".banner").css(("margin-top"),0);
            $("body").css(("margin-top"),0);
        }
    });
}


$(window).resize(function() {
    resizeBanner();
});

$(window).load(function() {
    resizeBanner();
    fixedNav();
});

$(document).ready(function() {
    resizeBanner();
});

angelwhite 13 март 2014, в 23:36

Источник

0

Любой код для нас, чтобы проверить? Как эта липкая навигация / баннер на самом деле сделаны липкими?
Jeroen W 13 март 2014, в 22:18
0

Просто добавил скрипт в мой оригинальный пост! :)
angelwhite 13 март 2014, в 22:23

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Любой код для нас, чтобы проверить? Как эта липкая навигация / баннер на самом деле сделаны липкими?
Просто добавил скрипт в мой оригинальный пост! :)

Nephelococcygia · Accepted Answer · 2014-03-13T21-46-00.000Z

Вам просто нужно добавить к элементу css, который имеет класс "banner":

position : absolute;
bottom : 0;

PS: на самом деле ваша коробка изменяет размер, но в верхнем левом углу по умолчанию установлен заголовок. Поскольку родительский флажок установлен в позицию: relative, весь абсолютный элемент в будет ссылаться на этого родителя, а не на полный документ.

О, черт возьми, что легко исправить! Теперь я чувствую себя глупо, ха-ха. Спасибо вам большое!