Плавающий баннер

@sepos · Регистрация: 06.02.2014

Студворк — интернет-сервис помощи студентам

Всем привет!
Возник такой вопрос, при добавлении на страницу плавающего баннера, он встает на самый верх страницы, поверх сайдбара. Как сделать так чтобы он был под этим самым сайдбаром?

вот css код который я использовал:

CSS
1
2
3
4
5
6
7
<style>
#aside1 {
  position: fixed;
  z-index: 101;
  width: 240px;
}
</style>

@AlexZaw · 30.01.2019, 20:42

sepos, ваш "плавающий" баннер имеет фиксированное позиционирование, которое всегда рассчитывается от тега body. По умолчанию его координаты задаются в левом верхнем углу.

@sepos · 30.01.2019, 21:05 **[ТС]**

и как сделать чтоб баннер был под сайдбаром?

@AlexZaw · 30.01.2019, 21:11

Сообщение от sepos

и как сделать чтоб баннер был под сайдбаром?

Как минимум использовать верные правила в css, еще, возможно, поправить разметку.
По этому кусочку кода невозможно дать конкретные рекомендации.

@sepos · 30.01.2019, 23:30 **[ТС]**

ок, кое-что я уже сделал...

HTML5
1
2
3
4
5
6
<div id="sticky" class="banner_block">
    <div class="sticky-anchor"></div>
        <div class="sticky-content">
            <a href="https://www.google.com/"><img src="https://www.cyberforum.ru/img-ARHIV/bannerimg.jpeg" width="240" height="400" alt="MGN495"></a>
        </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.banner_block {
    float: left;
    width: 240px;
    margin-left: -100%;
    position: relative;
    top:1450px;
    background: #F9F9F9;
    color:#880042;
    padding:5px 3px;
    line-height: 10px;
}
 
.sticky-content.fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var StickyElement = function(node){
  var doc = $(document), 
      fixed = false,
      anchor = node.find('.sticky-anchor'),
      content = node.find('.sticky-content');
  
  var onScroll = function(e){
    var docTop = doc.scrollTop(),
        anchorTop = anchor.offset().top;
    
    console.log('scroll', docTop, anchorTop);
    if(docTop > anchorTop){
      if(!fixed){
        anchor.height(content.outerHeight());
        content.addClass('fixed');        
        fixed = true;
      }
    }  else   {
      if(fixed){
        anchor.height(0);
        content.removeClass('fixed'); 
        fixed = false;
      }
    }
  };
  
  $(window).on('scroll', onScroll);
};
 
var demo = new StickyElement($('#sticky'));

Теперь проблема в том что, в тот момент когда баннер фиксируется, он перепрыгивает в другую часть страницы. Вот и вопрос теперб о том, как сделать чтоб баннер не скакал по всей странице...

@AlexZaw · 31.01.2019, 10:52

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

@sepos · 31.01.2019, 12:18 **[ТС]**

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

@AlexZaw · 31.01.2019, 13:36

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

@sepos · 31.01.2019, 13:38 **[ТС]**

Ну, допусти, баннер прижимается к левому верхнему углу страницы. Что сделать чтобы этого не происходило?

@AlexZaw · 31.01.2019, 13:52

Сообщение от sepos

Что сделать чтобы этого не происходило?

Убрать в css и js правила которые его туда прижимают. Не?
Вы можете нормально описать что в конечном итоге вам нужно? В первом сообщении вы говорили про то что баннер нужен под сайдбаром. Затем вдруг оказалось что баннер перемещается вправо. Вы хотите помощи но, не хотите предоставить код который поможет в решении проблемы.
Вы как пациент который приходит к врачу с жалобой на боли, но не говорит что и где конкретно у него болит и при этом требует точного диагноза...

@sepos · 31.01.2019, 14:01 **[ТС]**

В смысле??? Весь код (html+css+js) я предоставил, так же есть 2 картинки, где указанно что есть норм и что нет. Норм, это когда баннер будучи под сайдбаром, при скролинге страницы вниз, опускается вместе со страницей, при этом не прижимается к правому или левому углам...

@AlexZaw · 31.01.2019, 14:29

Сообщение от sepos

Весь код (html+css+js) я предоставил,

Сообщение от sepos

когда баннер будучи под сайдбаром

где html и css сайдбара и того элемента где размещен этот сайдбар и ваш баннер?
В вашем коде баннер при достижении верхней границы экрана фиксируется. Не понятно под каким сайдбаром он должен быть, должен ли сайдбар также быть фиксированным или будет скроллится вверх? Должен ли баннер всегда быть на одном месте или двигаться в определенных пределах?

@sepos · 31.01.2019, 14:42 **[ТС]**

Не понятно под каким сайдбаром он должен быть

Под тем сайдбаром, который на картинке

должен ли сайдбар также быть фиксированным или будет скроллится вверх

будет скролится вверх, фиксированым должен будет быть только баннер

Должен ли баннер всегда быть на одном месте

Да, как я и указал в последней картинке.

@AlexZaw · 31.01.2019, 15:20

Сообщение от sepos

Да, как я и указал в последней картинке.

На картинке он в левом верхнем углу, там он и должен находится постоянно? Что то я совсем запутался.

@sepos · 31.01.2019, 15:31 **[ТС]**

...

@sepos · 31.01.2019, 15:35 **[ТС]**

Вот как на этой картинке, так должно быть

Красной стрелкой указанно откуда и куда должна двигаться картинка(баннер). Тоесть в самом начале она под сайдбаром, а после скролинга вниз, двигается вместе с окном

@AlexZaw · 31.01.2019, 15:51

Сообщение от sepos

Тоесть в самом начале она под сайдбаром, а после скролинга вниз, двигается вместе с окном

Вот, уже лучше. Выясняем дальше. Баннер, по мере скролла, должен опускаться в самый низ страницы или вести себя как то иначе? И да, все-таки нужен код и сайдбара и всех сопутсвующих элементов. Это не моя прихоть, просто нужно знать в каком месте и относительно чего располагать баннер. Согласитесь, если просто задать баннеру отступ сверху,допустим, в 50 пикселей это будет не очень правильно, так как он может либо перекрывать сайдбар, либо иметь отступ больше чем вам нужно.

@sepos · 31.01.2019, 16:01 **[ТС]**

Написал вам в ЛС

@AlexZaw · 31.01.2019, 16:21

Не по теме:

Сообщение от sepos

Написал вам в ЛС

Хорошо, посмотрю попозже, можете здесь выложить, может быстрее ответят.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	30.01.2019, 20:42
	sepos, ваш "плавающий" баннер имеет фиксированное позиционирование, которое всегда рассчитывается от тега body. По умолчанию его координаты задаются в левом верхнем углу. 0

@sepos 0 / 0 / 0 Регистрация: 06.02.2014 Сообщений: 46
	30.01.2019, 21:05 [ТС]
	и как сделать чтоб баннер был под сайдбаром? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	31.01.2019, 10:52
	sepos, в вашем приведенном коде баннер прижимается к левому верхнему углу страницы, но никак ни к верхнему правому. Прежде чем выкладывать код убедитесь что он воспроизводит вашу ошибку. 0

@sepos 0 / 0 / 0 Регистрация: 06.02.2014 Сообщений: 46
	31.01.2019, 12:18 [ТС]
	Во-первых, на фото видно что в верхнем правом углу. Во-вторых, если пару раз обновить страницу, тогда баннер меняет своё местоположение, с правого угла, на левый. Может ли кто-нибудь сказать как его пригвоздить к своему изначальному местоположению? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	31.01.2019, 13:36
	sepos, в вашем приведенном коде вы можете хоть сто раз обновить страницу - баннер положения не меняет. Прилагаемая фотография к коду который воспроизводит ошибку отношения не имеет. Я повторюсь - проверяйте выкладываемый код так, что-бы описываемая ошибка имела место быть. 0

@sepos 0 / 0 / 0 Регистрация: 06.02.2014 Сообщений: 46
	31.01.2019, 13:38 [ТС]
	Ну, допусти, баннер прижимается к левому верхнему углу страницы. Что сделать чтобы этого не происходило? 0

@sepos 0 / 0 / 0 Регистрация: 06.02.2014 Сообщений: 46
	31.01.2019, 14:01 [ТС]
	В смысле??? Весь код (html+css+js) я предоставил, так же есть 2 картинки, где указанно что есть норм и что нет. Норм, это когда баннер будучи под сайдбаром, при скролинге страницы вниз, опускается вместе со страницей, при этом не прижимается к правому или левому углам... Миниатюры 0

@sepos 0 / 0 / 0 Регистрация: 06.02.2014 Сообщений: 46
	31.01.2019, 15:31 [ТС]
	... 0

@sepos 0 / 0 / 0 Регистрация: 06.02.2014 Сообщений: 46
	31.01.2019, 15:35 [ТС]
	Вот как на этой картинке, так должно быть Красной стрелкой указанно откуда и куда должна двигаться картинка(баннер). Тоесть в самом начале она под сайдбаром, а после скролинга вниз, двигается вместе с окном Миниатюры 0

@sepos 0 / 0 / 0 Регистрация: 06.02.2014 Сообщений: 46
	31.01.2019, 16:01 [ТС]
	Написал вам в ЛС 0