Исправлено позиционирование обрезает изображение, когда браузер слишком маленький - PullRequest
Новая
       27

Исправлено позиционирование обрезает изображение, когда браузер слишком маленький

0 голосов
/ 07 февраля 2012

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

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

Есть ли способ позиционировать его, чтобы он оставался фиксированным во время прокрутки, НО, чтобы выровнять его по верху браузера при прокрутке вниз?

Все, что у меня есть, это прямо сейчас. Я все еще обнимаю css и просто не могу найти решение: 

<div id="right_image" style="margin-top:0; position:fixed; width:150px; height:700px; display:block; border:none;"></div>

1 Ответ

0 голосов
/ 07 февраля 2012

Если вы укажете bottom:0px (или другое значение), то оно всегда останется фиксированным в нижней части страницы и не будет обрезано внизу.

РЕДАКТИРОВАТЬ - добавьте следующий скриптна страницу, чтобы сделать то, что обсуждалось в комментариях (вы можете удалить ссылку jquery, если вы ее уже получили): 

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script language='javascript' type='text/javascript'>
    $(document).scroll(function() {
        if($(this).scrollTop()==0) $('#right_image').css('bottom', '');
        else $('#right_image').css('bottom', '0px');
    });
</script>

, дайте мне знать, если это работает

...