Якорь не прокручивается правильно

У меня есть макет что-то вроде:

<div class="banner"></div>
<div class="content"></div>

Мой баннер имеет position:fixed; и примерно 200px в высоту.

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

Есть ли что-то (CSS или jQuery), чего мне не хватает?


scroll css fragment-identifier
person Purplefish32    schedule 29.06.2010    source источник
comment
Можете ли вы опубликовать свой CSS и HTML, где якорь?   -  person Zacho    schedule 29.06.2010
comment
вы можете компенсировать это только в том случае, если вы используете прокрутку javascript и соответственно добавляете/вычитаете высоту баннера.. в этом весь смысл position:fixed.. чтобы вывести его из обычного потока документов. вашего сайта с помощью div и стилизуйте его так, чтобы вы прокручивали только его.   -  person Gabriele Petrioli    schedule 29.06.2010
comment
Рабочий пример проблемы также очень поможет.   -  person Jon Cram    schedule 29.06.2010

Ответы (1)


arrow_upward
1
arrow_downward

Это дубликат привязки Div прокручиваются слишком далеко

Для запросов на просмотр примера кода я разместил полную страницу примера здесь: https://gist.github.com/denised/5924370.

Ключевым моментом является наличие двух div (#header и #mainbody) и следующего фрагмента css (который, как мне кажется, является довольно стандартным способом создания фиксированного заголовка):

#header {
  position:fixed; 
  left:0; right:0; top:0;
  background-color: #F0F0E8;
  z-index:2;
}

#mainbody { 
  position: absolute;
  top: 150px;
}
person Denise Draper    schedule 04.07.2013