jQuery - рассчитать чувствительный запас для элемента

Я хотел бы рассчитать отзывчивый край верхнего уровня для нижнего колонтитула навигации - он должен всегда располагаться на 50 пикселей по дну. Я написал этот код, но он не работает - кто-нибудь может мне помочь?jQuery - рассчитать чувствительный запас для элемента

(function() { 
$(window).resize(function() { 
    var navHeight = $("nav").height(); 
    $("nav footer").css({ "margin-top": navHeight - 50 }); 
}).resize(); });

Это стили для элементов до сих пор, довольно простые.

nav { position:fixed; top:0; left:0; width:320px; height:100%; padding:100px 0 0 0; } 
nav footer { }

Мне действительно нужно, чтобы это выполнялось с помощью jQuery - без CSS-решений. Сожалею!

источник

2013-11-14 didi

Вам просто нужен css!

.nav.footer { 
    position: fixed; 
    bottom: 50px; 
}

СОВЕРШЕННО!;)

Пример кода: http://jsfiddle.net/QKLQx/

источник

2013-11-14 16:07:47

Это будет отделить колонтитул от остальной части navigatio n - это не то, что я хочу. Сожалею! – didi

Вы можете сделать это в простом CSS:

nav { 
    position: relative; 
} 

nav footer { 
    position: absolute; 
    bottom: 0px; 
    height: 50px; 
}

Любой элемент с relative или absolute позиции сбрасывает смещение родителя его элементов-потомков, это означает, что вы можете которые содержатся внутри nav относительно nav, а не документа.

источник

2013-11-14 16:18:05 Ennui

Даже это нарушит структуру - мне действительно нужно, чтобы это было сделано с помощью jQuery. Сожалею! – didi

Вы можете просто добавить эти стили динамически в 'nav' и' footer' с jQuery в обработчике событий resize. В противном случае нам нужно увидеть разметку и CSS для 'nav' и' footer' и любых других соответствующих элементов, потому что идеальный метод позиционирования 'footer' будет зависеть от разметки и CSS. – Ennui

Способ, которым я начал кодировать, в значительной степени является оптимальным решением для меня. Если бы этот код работал, это было бы лучше для меня. Благодаря! – didi

Ну, решение CSS ниже по @Ennui должны работать с попыткой JQuery следующим образом:

(function() { 
$(window).resize(function() { 
    $("nav").css("position", "relative"); 
    $("nav footer") 
     .css("position", "absolute") 
     .css("bottom", "0px") 
     .css("height", "50px"); 
}).resize(); });

источник

2013-11-14 16:34:39

Теперь, когда он обновил свой пост с помощью CSS, я вижу, что это решение не будет работать точно, так как 'nav' является' position: fixed', он не устанавливает контекст смещения/позиционирования, как позиционный элемент 'relative' или' absolute'. Все, что ему нужно сделать, это добавить полную высоту 'position: relative' внутри' nav', которая обертывает 'footer' и остальную часть содержимого' nav', тогда она будет работать. – Ennui

мой код ... http://jsfiddle.net/7rHeR/

может быть, мы не понимаем вашу проблему .. или вы не знаете, что хотите ...

надеюсь, что это поможет!

ЯШ:

function getNavFooterDistance() { 
    var distance = $(".nav.footer").offset().top - $(".nav").offset().top; 
    console.log("Distance " + distance + "px"); 
} 

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

    getNavFooterDistance(); 
});

CSS:

.nav { 
    position:relative; 
    width: 100%; 
    height:100%; 
    background-color: blue; 
} 
.nav .footer { 
    position: absolute; 
    bottom: 50px; 
    height: 50px; 
    width: 320; 
    background-color: red 
}

HTML:

<div class="nav"> 
    <div class="nav footer"></div> 
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br> 
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br> 
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br> 
</div>

источник

2013-11-14 17:17:41

jQuery - рассчитать чувствительный запас для элемента

ответ

Смежные вопросы