Позиционирование относительного div до фиксированного div

-2

У меня есть заголовок с изображением, которое нужно фиксировать при прокрутке. У меня есть контейнер, который всегда должен иметь одинаковое расстояние до заголовка. Поэтому, если я изменил размер окна в горизонтальном положении, изображение изменится, и содержание изменит положение.Позиционирование относительного div до фиксированного div

Пример:

я установил обертку для position:fixed; и контейнер для position:relative;. Если вы измените размер окна, он отлично работает. Контейнер остается на одном и том же расстоянии от изображения. НО .. Я больше не могу прокручивать, и поэтому я больше не вижу контент. :-(

Я понятия не имею, как использовать JS, так что, может быть, кто-то может дать мне подсказку

Live Link

источник

2016-07-01 user3024693

Вопросы, связанные с запросом кода, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **. Хотя вы предоставили ссылку [** на пример или сайт **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-paste-a-link-to-it), если ссылка должна стать недействительной, ваш вопрос не будет иметь ценности для других будущих пользователей SO с той же проблемой. –

Попробуйте сделать код или jsfiddle, который воссоздает проблему. У вас значительно больше шансов получить помощь, если вы поставите вопрос проще/привлекательнее, чтобы ответить тем, кто предоставит вам свою мудрость бесплатно. – MassDebates

Oh Извините - я изменил это в следующий раз - сделав мой вопрос более легким/привлекательным - английский не мой родной язык, и я более чем рад, что я магался, чтобы описать свою проблему, я был :-(И спасибо за то, что вы делитесь своей мудростью :-) – user3024693

Любой элемент, который фиксирован, имеет все его дети фиксированной, а также. Так что ничего в ваша обложка будет заблокирована, поэтому вы не сможете прокручивать. Если вы удаляете фиксированный элемент оболочки, тогда ваш навигатор все еще фиксируется, и тело прокручивается правильно. Оттуда, небольшой трюк, который мне нравится использовать, является чем-то как это ...

<figure class="image_container" style="background:url(files/Header/Haus_Sommer.jpg) no-repeat bottom center fixed;background-size:cover;"> 
    <img src="files/Header/Haus_Sommer.jpg" width="1460" height="1000" alt="" style="opacity: 0;"> 
</figure>

Таким образом, вы можете использовать привязку к фону: исправлено для изображения заголовка и по-прежнему получать масштабирование от самого тега изображения, так как оно просто имеет значение непрозрачности 0, но оно все еще присутствует.

источник

2016-07-01 15:46:13 will

Thx .. Проблема у меня в том, что каждая картинка на более чем 200 страницах отличается. Но я буду помнить ваш ответ .. это может пригодиться в другой раз ...:) – user3024693

Если вы хотите использовать небольшой javascript, вы можете сделать что-то вроде $ ('. Image_container'). Each (function() {var myImg = $ (this) .children ('img'). Attr ('src '); $ (this) .attr (' style ',' background: url ('+ myImg +') фиксированный нижний центр no-repeat, background-size: cover; ");}); – will

Позиционирование относительного div до фиксированного div

ответ

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