Inter-Net.PRO

Как остановить плавающий блок?

  • 15
22 окт 2018 10:42 - 22 окт 2018 16:21 #1 от Марина
Добрый день!

Подскажите, пожалуйста, как сделать, чтобы плавающий блок останавливался. 

В хеад устанавливаю это:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

В файл боковой колонки, но не в ее код, а под ним внедряю этот код:
<script language="javascript">
    $(document).ready(function(){
        var floatsidebar = $("#float-sidebar");
        var offset = floatsidebar.offset();
        var left = offset.left;
        var top = offset.top;
        var width = $("#float-sidebar").width();
        var height = $("#float-sidebar").height();

        $(window).scroll(function(){
            var scrollTop = $(window).scrollTop();
            if (scrollTop >= top) {
                $('#float-sidebar').css({left:left+'px',position:'fixed',top:"0px",width:width+"px"});
            } else {
                $('#float-sidebar').css({position:'static',});
            }
        });
    });
</script>

А сам блок уже вношу сюда:
<div id="float-sidebar"> Тут код вашего рекламного блока или любое другое содержимое </div>
Тоже располагаю в файле боковой колонки под кодом сайдбара.

Блок отлично плавает, причем плавно. Но блок заползает на сайдбар и на подвал. Мало того он прилепляется с середины сайдбара к шапке сайта. Существуют ли какие-то способы остановить плавающий блок перед сайдбаром (он под сайдбаром располагается) и перед подвалом?

  • 250 60
22 окт 2018 16:14 #2 от Inter-Net PRO

Существуют ли какие-то способы остановить плавающий блок перед сайдбаром (он под сайдбаром располагается) и перед подвалом?

Да, конечно можно. Особенно если есть доступ непосредственно в боевых условиях переписывать скрипт.
Как я понял, сайтбар на который наползает - это что то типа липкого меню.

С сайтбаром можно из предоставленной вами информации решать проблему, а вот с подвалом посложнее - я вёрстки не вижу, поэтому не знаю как его из DOM вытащить. Может у подвала и у сайтбара есть какой уникальный тег, id или class? Можете ссылку показать (я её потом затру) или предоставить уникальные идентификаторы сайтбара и подвала?

Пока кривым костылём могу предложить решение для сайтбара.

Допустим у вас сайтбар высотой 125px;
заменяем var top = offset.top;
на
var top = offset.top + 125;
а вот здесь $('#float-sidebar').css({left:left+'px',position:'fixed',top:"0px",width:width+"px"});
у top ставим нашу высоту 125px:
$('#float-sidebar').css({left:left+'px',position:'fixed',top:"125px",width:width+"px"});

Получается вам нужно поставить не 125,а настоящую высоту сайтбара. Можно ещё пикселей накинуть для отступа, чтоб не сливалось.

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

А вот с подвалом - нужно условие скрипта переписывать. А у меня даже нет его идентификатора.
Спасибо сказали: Марина

  • 15
22 окт 2018 17:20 - 22 окт 2018 18:00 #3 от Марина
Я удивляюсь Вашим знаниям. Вы правы. Плавающий блок залипает на плавающее меню, что расположено в шапке. Сайт вот этот --удалено по просьбе--. Там внизу в сайдбаре блок плавающий со свежими записями.

  • 250 60
22 окт 2018 18:10 #4 от Inter-Net PRO
Сайт я увидел, ссылку удалил. Код создающий блок тоже удалил - он мне не нужен.
Если можете, отключите пока этот скрипт, чтоб мне он не мешал. Я через консоль браузера буду новый код писать и тестировать.

  • 15
22 окт 2018 20:17 #5 от Марина
Спасибо Вам за обратную связь и помощь. Я Вас правильно поняла, я должна удалить скрипт плавающего окна? Я его удалила с сайта. 

  • 250 60
23 окт 2018 02:31 #6 от Inter-Net PRO

Марина пишет: Я его удалила с сайта

Вот готовый код на чистом JavaScript (не нужно подключать никаких левых библиотек).
"use strict";window.onload=function(){!function(t,e,o,i){var n=document.querySelector(t),s=document.querySelector(e);function p(t){var e=t.getBoundingClientRect();return{top:e.top+pageYOffset,left:e.left+pageXOffset,width:t.offsetHeight,height:t.offsetHeight}}var c=p(n);positStopElem=p(s),window.addEventListener("scroll",function(){var t=document.documentElement.clientWidth;if(i<=t){var e=window.pageYOffset||document.documentElement.scrollTop;e>=c.top-o&&e<=positStopElem.top-c.height+o?n.style.cssText="position: fixed; top: ".concat(o,"px; left: ").concat(c.left):e>=c.top-o&&e>positStopElem.top-c.height-o&&e<=positStopElem.top-o?n.style.cssText="position: fixed; top: ".concat(positStopElem.top-c.height-e-o,"px;"):n.style.position="inherit"}else n.style.position="inherit"})}(".latest-articles",".footer-body",60,960),window.addEventListener("resize",function(){var t=new Event("scroll");window.dispatchEvent(t)})};
Он сразу оптимизирован в одну строчку, не знаю сможете скопировать или нет.
Адаптивен - при уменьшении окна браузера (мобильная версия) - блок залипать не будет.
Можно добавить в js файл.
Если будете вставлять этот код через виджет, то обязательно оберните его тегами script:
<script>Тут код</script>
Спасибо сказали: Марина

  • 15
23 окт 2018 17:10 - 23 окт 2018 18:00 #7 от Марина
Огромное Вам спасибо! Вы настоящий волшебник. Все работает сразу после установки кода. Подскажите, пожалуйста, как эту плавающую функцию отключить на мобильных устройствах? Видно при разрешении экрана 1024 блок не корректно отображается. 

  • 250 60
23 окт 2018 18:13 #8 от Inter-Net PRO

Марина пишет: Подскажите, пожалуйста, как эту плавающую функцию отключить на мобильных устройствах? Видно при разрешении экрана 1024 блок не корректно отображается.

Смотрите код с конца, там есть цифра 960. Замените её на 1024.
Спасибо сказали: Марина

  • 15
23 окт 2018 20:04 #9 от Марина
Спасибо за Ваш ответ! Я изменила значение, и это помогло в случае с разрешением экрана 1024. Но теперь блок наползает на подвал на большем мониторе. В одном браузере (в Chrome) насовсем, в другом только во время скороллинга наверх (в Firefox). И еще заметила, что блок, когда начинает двигаться, смещается сначала направо. Это можно как-то исправить?

  • 250 60
23 окт 2018 20:57 - 23 окт 2018 20:58 #10 от Inter-Net PRO

Марина пишет: Но теперь блок наползает на подвал на большем мониторе. В одном браузере (в Chrome) насовсем, в другом только во время скороллинга наверх (в Firefox).

Проверил в обоих браузерах - у меня всё правильно работает.
Может это у вас из-за рекламы и медленного интернета?

Марина пишет: И еще заметила, что блок, когда начинает двигаться, смещается сначала направо. Это можно как-то исправить?

Это из-за того, что у блока последних материалов не прописана ширина в стилях. При фиксированной позиции он заполняет доступное место (получается чуть шире).
Добавьте в css вот это:
@media (min-width: 1025px) {.latest-articles{max-width:299px}}
смещения не будет.
Спасибо сказали: Марина

  • 15
25 окт 2018 17:13 #11 от Марина
Вы как обычно оказались правы. Дело было в моих браузерах.
Могли бы Вы подсказать, как выровнять по центру блок latest-articles? Он у меня смещен влево. Это я что-то в стилях не доделала. А что, не могу понять.

  • 250 60
27 окт 2018 16:02 - 27 окт 2018 16:12 #12 от Inter-Net PRO

Марина пишет: Могли бы Вы подсказать, как выровнять по центру блок latest-articles?

Я выше вам дал рецепт.
Вы добавили его в CSS с опечаткой. У вас min-width: 1025x, а должно быть min-width: 1025px
Видите разницу?

И ещё, у вас в этом же файле css ошибка - строка 2327 .teasernet
padding-left: -5px !important;
падинги не могут иметь отрицательных значений!!!
Спасибо сказали: Марина

  • 15
28 окт 2018 20:08 #13 от Марина
Спасибо! Это я там что-то мудрила с тем, чтобы блок по центру разместить и одну букву стерла. Ваше решение предотвращает движение блока вправо. А на мониторе компьютера блок прилеплен слева. Это так было с самого начала, еще до того, как этот блок было сделан с Вашей помощью плавающим. Я выставила text-align: center;, но это не помогло его центрировать. Может есть какой-то другой способ?

  • 15
28 окт 2018 20:08 #14 от Марина
Только margin может быть отрицательным?

  • 250 60
28 окт 2018 20:29 - 28 окт 2018 20:31 #15 от Inter-Net PRO

Марина пишет: Может есть какой-то другой способ?

text-align: center - выравнивает текст по центру. Это свойство только для текста.
Я не совсем понял что вы имеете в виду под "выровнять по центру".
При залипании этот блок становится в фиксированную позицию position: fixed. Координаты для него задаются через свойства left и top.
top я задал в скрипте, чтоб под менюшку не залазил, а left сам высчитывается скриптом при загрузке страницы сайта и подставляется при залипании. Получается блок остаётся на месте относительно левого края монитора, только уже он в залипшем состоянии.

Марина пишет: Только margin может быть отрицательным?

Да, маржин может быть отрицательным. Падинг нет.

Вот инструмент для проверки ошибок в CSS -  jigsaw.w3.org/css-validator
Ошибки в CSS желательно исправить, на предупреждения можно забить (лучше проигнорировать предупреждения).

  • 15
30 окт 2018 15:20 - 30 окт 2018 18:05 #16 от Марина
Спасибо Вам за ответ! Извините, сразу не додумалась сделать скриншот. Вот ссылка, как блок выглядит на большом мониторе

  • 250 60
31 окт 2018 11:43 #17 от Inter-Net PRO

Марина пишет: как блок выглядит на большом мониторе

Если я правильно вас понял, вы хотите отодвинуть всю эту правую колонку от основного блока.
Если тема не обновляется, файл /wp-content/themes/adve_lite/style.css строка 2539
классу .overlay-widget-right добавьте свойство margin-left
Например:
margin-left: 100px;

Если тема обновляется, чтобы файл стилей при обновлении не перезаписался, то добавьте не в этот файл, а в пользовательские стили (настройки темы, я вам раньше писал куда для социальных кнопок стили подключать).
Только это css-свойство добавьте уже с медиа запросом, вот так:
@media screen and (min-width: 960px) {
    .overlay-widget-right {
        margin-left: 100px;
    }
}

Авторизация

Войти через соцсети: