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

@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

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

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

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@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