Форум Сайтостроение Веб-строительство

position: 'fixed'

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

Добрый день,

Есть блок: 

<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
Staid
#1
musulman:
Получается у них только баннер и видно. Как можно сделать что бы он не выходил из своей колонки

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

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

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

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

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

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

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

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

- а родителем

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

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

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

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

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

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

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

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

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

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

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

Как расположить кнопку в подскажите несложный вопрос по выпадающее меню - не

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