Сделать div исправленным только внутри другого прокручиваемого div

Question

Сделать div исправленным только внутри другого прокручиваемого div

0

У меня есть страница со структурой что-то вроде этого:

<div id="header"></div>
<div id="messages"></div>
<div class="content">
    <div id="sidebar"></div>
    <div id="content"></div>
    <div id="other_stuff"></div>
</div>

Заголовок - это заголовок страницы. Сообщения div - это место, где я нажимаю сообщения. Иногда он заполнялся, иногда он пуст. Боковая панель - это меню навигации. Контент - это длинный прокручиваемый div. И другие вещи - это другой материал.

Мне нужно, чтобы боковая панель фиксировалась на странице с левой стороны при прокрутке содержимого. Но боковая панель никогда не должна перекрывать сообщения и заголовок. Другими словами, когда я просматриваю страницу, заголовок и сообщения обычно прокручиваются с контентом. Но когда я просматриваю страницу, боковая панель не должна накладывать сообщения и заголовок div.

Я использовал position: fixed; свойства CSS position: fixed; для этого, но с этим боковым окном свойств накладывает сообщения. Как я могу исправить это с помощью CSS и javascript/jQuery?

Paul 16 апр. 2014, в 11:08

Источник

1

сделать скрипку с CSS
4dgaurav 16 апр. 2014, в 08:26

Теги:

javascript

jquery

html

css

2 ответа

0

Это хорошо, если вы можете сделать jsfiddle, или я думаю, что что-то вроде ниже кода может вам помочь. Исправьте высоту заголовка и сообщений и укажите маржу на боковой панели с общей высотой заголовка и сообщений.

#header, #messages {
height:3em;

} .content #sidebar { position:fixed; margin-top:3em; width:5em; } .content #sidebar { position:fixed; margin-top:3em; width:5em; }

.content #content,.content #other_stuff{
width:3em;
margin-left:5em;

}

Nimmi 16 апр. 2014, в 06:55

0

также в качестве предложения использовать имена классов в CSS вместо использования идентификаторов
Nimmi 16 апр. 2014, в 08:39

Ещё вопросы

также в качестве предложения использовать имена классов в CSS вместо использования идентификаторов

knitevision · Accepted Answer · 2014-04-16T06-35-00.000Z

Если я исправлю вас, вы хотите, чтобы боковая панель была исправлена, начиная с определенной точки.

Это может быть достигнуто с помощью jQuery. Есть много способов, по крайней мере, я знаю. Вот чистая версия jQuery, которую я использую в таких случаях (если вы не хотите внедрять другие внешние JS-библиотеки)

jQuery(document).ready(function ($) {
    $fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
    $(window).scroll(function(){
            if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
            {
                $fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
            }
    });
});

Другие способы сделать это, используя другие JS-библиотеки, я знаю 2 из них:

1) Путевые точки jQuery

2) stickyjs.com

Надеюсь, это поможет.