Ездящее меню в пределах блока

B0nuse

B0nuse

Постоялец
Регистрация
6 Июн 2009
Сообщения
106
Реакции
21
Уважаемые, подскажите решение.

Дано: html страница с обычной версткой div'ами (хеадер, левое меню, центральная часть, правое меню, футер). Высота блоков может меняться.

Задача: создать div (блок меню может меняться по высоте), который будет двигаться в пределах блока (например, левого меню) вместе с прокруткой страницы в браузере вниз или вверх.

ЗЫ: Кто видел в одноклассниках рекламный блок слева - точно поймет.
 
НАсколько я понял, пригодится position:fixed, а так же свойство clip из css3. Об этих свойствах можете почитать в документации
 
Основная проблема в том, что когда меню становится по высоте больше, чем высота экрана (например, на ноутах), то просто свойство fixed не даст Вам возможности увидеть низ меню.
Тоже самое с вариантом от AGENT131313

Extalionez написал(а):
Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
Вы можете подсказать как сделать такое же меню как тут по ссылке слева?
 
B0nuse написал(а):
Основная проблема в том, что когда меню становится по высоте больше, чем высота экрана (например, на ноутах), то просто свойство fixed не даст Вам возможности увидеть низ меню.
Тоже самое с вариантом от AGENT131313


Вы можете подсказать как сделать такое же меню как тут по ссылке слева?
Нажмите для раскрытия...
А что составляет труда вытащить его из исходного кода?
 
AGENT131313 написал(а):
А что составляет труда вытащить его из исходного кода?
Нажмите для раскрытия...
Не хватает знаний.
Возьмем Ваш пример и немного его переделаем
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Плавающий блок</title>
<style type="text/css">
#main {
    width:900px;
    margin:0 auto;
}
.colRight {
    width:70%;
    float:left;
}
.colLeft {
    float:left;
    width:30%;
}
h1{
    background:#CCC;
    padding:50px;
}
#fixed {
    background:#CCC;
    padding:20px;
    margin-right:20px;
}
</style>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
</head>
<body>
<div id="main">
    <h1>Плавающий блок. Прокрутите страницу вниз</h1>
    <div class="colLeft">
        <div id="fixed" data-spy="affix"><p>Я зафиксированный блок</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p></div>
    </div>
    <div class="colRight">
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская изменане могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
    </div>
</div>
</body>
</html>
Почему не работает? Чего не хватает?
 
B0nuse написал(а):
Не хватает знаний.
Возьмем Ваш пример и немного его переделаем
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Плавающий блок</title>
<style type="text/css">
#main {
    width:900px;
    margin:0 auto;
}
.colRight {
    width:70%;
    float:left;
}
.colLeft {
    float:left;
    width:30%;
}
h1{
    background:#CCC;
    padding:50px;
}
#fixed {
    background:#CCC;
    padding:20px;
    margin-right:20px;
}
</style>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
</head>
<body>
<div id="main">
    <h1>Плавающий блок. Прокрутите страницу вниз</h1>
    <div class="colLeft">
        <div id="fixed" data-spy="affix"><p>Я зафиксированный блок</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p></div>
    </div>
    <div class="colRight">
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская изменане могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
        <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
    </div>
</div>
</body>
</html>
Почему не работает? Чего не хватает?
Нажмите для раскрытия...
Толи я чет непойму..толи хз...
Вы же используете id="fixed" значит у вас в скрипте должно быть #fixed.
Например. как в скрипте что вылаживал вам я выше
<script type="text/javascript">
$(function() {
var offset = $("#fixed").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {$("#fixed").stop().animate({marginTop: 0});};});
});
</script>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху