position: 'fixed'

Руслан Исмаилов
На сайте с 30.03.2007
Offline
198
1130

Добрый день,

Есть блок:

<script type="text/javascript">

$(document).ready(function(){
var HeaderTop = $('#va_fix').offset().top;

$(window).scroll(function(){
if( $(window).scrollTop() > HeaderTop ) {
$('#va_fix').css({position: 'fixed', top: '5px'});
} else {
$('#va_fix').css({position: 'static'});
}
});
});
</script>
<div id="va_fix">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Vesaktau_1 -->
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:360px"
data-ad-client="ca-pub-000000000000"
data-ad-slot="00000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Данный блок фиксируется при скролинге сайта.

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

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

Staid
На сайте с 30.07.2014
Offline
59
#1
musulman:
Получается у них только баннер и видно. Как можно сделать что бы он не выходил из своей колонки

Он и не выходит за пределы левой колонки.

maldivec
На сайте с 04.11.2008
Offline
160
#2

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

Я бы его просто скрывал при малом разрешении, все равно толку от него на нем не будет, даже если запихнуть его левее, чтобы часть скрывалась.

Кстати, гугл вас за это забанить может. Правилами запрещено гугл-адсенс вешать в плавающие блоки, насколько я знаю. Лучше уточните.

Saitoff
На сайте с 27.05.2011
Offline
71
#3
maldivec:
position: fixed вынимает блок из общего потока и позиционирует его внутри вьюпорта (видимой части экрана), так что он уже не находится ни в какой левой колонке. Он просто на краю экрана.

Немного не верно... position: fixed - позиционирует блок внутри родительского элемента, а не на край экрана... Если не указывать в стилях отступы, то блок будет находиться в верхнем левом углу родителя. ( Как раз вчера верстал подобное)

Olldman
На сайте с 21.04.2010
Offline
79
#4
Saitoff:
Немного не верно... position: fixed - позиционирует блок внутри родительского элемента, а не на край экрана... Если не указывать в стилях отступы, то блок будет находиться в верхнем левом углу родителя. ( Как раз вчера верстал подобное)

- а родителем

fixed является именно область просмотра(окно или другую область экрана), с помощью которой пользователи взаимодействуют с документом.

werty1001
На сайте с 30.03.2008
Offline
82
#5
maldivec:
Кстати, гугл вас за это забанить может. Правилами запрещено гугл-адсенс вешать в плавающие блоки, насколько я знаю. Лучше уточните.

Это бан 100%. Вопрос времени.

musulman:
Все работает хорошо, но если уменьшить размер получается что блок не остается в той колонке в которой должен быть, и налазиет на контент см. скриншот

Добавляйте/снимайте не позицию, а только класс. Далее в стиль пропишите минимальную ширину медиа запросом.

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk
Руслан Исмаилов
На сайте с 30.03.2007
Offline
198
#6

Всем спасибо за советы, по правилам не знал.

Убираю данную мульку.

maldivec
На сайте с 04.11.2008
Offline
160
#7
Saitoff:
Немного не верно... position: fixed - позиционирует блок внутри родительского элемента, а не на край экрана...

Это вы про absolute пишите. Уж не знаю как вы там и что верстали, но fixed позиционирует элемент относительно вьюпорта. Например прилипающие к верху экрана менюшки.

Если не указывать отступы, то вообще не имеет смысл указывать position отличный от relative. В вашем случае надо было position: absolute использовать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий