Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.52/25: Рейтинг темы: голосов - 25, средняя оценка - 4.52
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20

При скроле сайдбар прилипает к низу страницы

11.01.2017, 07:50. Показов 4883. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Народ, помогите, весь инет перерыл, но ничего подходящего не нашёл!!
Может кто встречал подобное или же выделит пять минут, чтобы набросать то, что мне необходимо - буду БЕЗМЕРНО благодарен!! Можно сказать, что это вопрос жизни и смерти!!

Есть разметка:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
 
<div id="sidebar">
    <div id="sticky">
        <div id="blok_1">Блок 1</div>
        <div id="blok_2">Блок 2</div>
    </div>
</div>
 
<div id="content"></div>
 
<div id="footer"></div>
</div>
</body>
</html>
Стили

CSS
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
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;}
 
#header {
position: fixed;
left:0;
top: 0;
width:100%;
height:25px;}
 
#sidebar {
position: absolute;
width: 250px;
left:0;
top:25px;
bottom:0;}
 
#content {
padding: 40px 20px 130px 270px;}
 
#footer {
position: absolute;
left: 270px;
right: 20px;
bottom: 0;
height: 90px;}
Требуется организовать сайдбар, на подобии левой колонки вконтакте:



При прокрутке страницы вниз, сайдбар опускается до тех пор пока нижний его край не достигнет низа экрана и "залипает", в то время как колонка с контентом продолжает прокручиваться далее, но есть пара моментов:
1. При высоте сайдбара менее высоты экрана, он прилипает не к низу экрана, а к верху.
2. Сайт адаптивный, а значит, необходимо чтобы при уменьшении экрана до некоторой ширины, сайдбар прекращал "залипать".

Эм, прошу прощения, залипать должен не сам сайдбар, а блок "sticky", внутри которого находятся прочие блоки...
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
11.01.2017, 07:50
Ответы с готовыми решениями:

Поведение элемента при скроле страницы
Не получается решить задачу, с данным кодом. Нужно, чтобы элемент &lt;span class=&quot;openclosebtn&quot;&gt;☰ open&lt;/span&gt; при скроле...

Текст не прилипает к картинке в боковой панели страницы
надо сделать так но у меня пока не получается вот код html боковая панель под классом description &lt;!DOCTYPE html&gt; &lt;html&gt; ...

Как создать второй сайдбар? у меня есть один сайдбар правый сайдбар, а мне нужен ещё и левый
Как создать второй сайдбар? Помогите пожалуйста, у меня есть один правый сайдбар, а мне нужен ещё и левый.http://great-fcbarcelona.ru/ -...

8
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
11.01.2017, 11:40
Цитата Сообщение от Dimaxgen Посмотреть сообщение
весь инет перерыл, но ничего подходящего не нашёл
плавающие блоки есть? а если найду?
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
12.01.2017, 06:01  [ТС]
Цитата Сообщение от fol Посмотреть сообщение
плавающие блоки есть? а если найду?
Хотел уже было возмутиться, "мол был я уже на этом ресурсе, и ничего дельного там не нашёл", но.. Просмотрел ещё раз статью и оказалось, что последний, приведённый в ней пример, есть то - что мне нужно (ну, почти).. И как я в прошлый раз проглядел его?! (будет мне урок - не садиться за пк, когда ребёнок не в садике или не спит - отвлекает ЖУТЬ)

fol, спасибо тебе огромное, что ещё раз носом ткнул!!

Добавлено через 7 минут
Народ, ещё один вопрос и тему можно закрывать..
Подмогите дописать скрипт!!! Нужно сделать так, чтобы при уменьшении окна браузера до определённой ширины, плавающий блок переставал таковым являться (для адаптивной вёрстки требуется)...

Вот сам скрипт

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
(function(){
var a = document.querySelector('#sticky'), b = null, K = null, Z = 0, P = 25, N = 0;  // если у P ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента, если у N — нижний край дойдёт до нижнего края элемента. Может быть отрицательным числом
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
  var Ra = a.getBoundingClientRect(),
      R1bottom = document.querySelector('#content').getBoundingClientRect().bottom;
  if (Ra.bottom < R1bottom) {
    if (b == null) {
      var Sa = getComputedStyle(a, ''), s = '';
      for (var i = 0; i < Sa.length; i++) {
        if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
          s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
        }
      }
      b = document.createElement('div');
      b.className = "stop";
      b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
      a.insertBefore(b, a.firstChild);
      var l = a.childNodes.length;
      for (var i = 1; i < l; i++) {
        b.appendChild(a.childNodes[1]);
      }
      a.style.height = b.getBoundingClientRect().height + 'px';
      a.style.padding = '0';
      a.style.border = '0';
    }
    var Rb = b.getBoundingClientRect(),
        Rh = Ra.top + Rb.height,
        W = document.documentElement.clientHeight,
        R1 = Math.round(Rh - R1bottom),
        R2 = Math.round(Rh - W);
    if (Rb.height > W) {
      if (Ra.top < K) {  // скролл вниз
        if (R2 + N > R1) {  // не дойти до низа
          if (Rb.bottom - W + N <= 0) {  // подцепиться
            b.className = 'sticky';
            b.style.top = W - Rb.height - N + 'px';
            Z = N + Ra.top + Rb.height - W;
          } else {
            b.className = 'stop';
            b.style.top = - Z + 'px';
          }
        } else {
          b.className = 'stop';
          b.style.top = - R1 +'px';
          Z = R1;
        }
      } else {  // скролл вверх
        if (Ra.top - P < 0) {  // не дойти до верха
          if (Rb.top - P >= 0) {  // подцепиться
            b.className = 'sticky';
            b.style.top = P + 'px';
            Z = Ra.top - P;
          } else {
            b.className = 'stop';
            b.style.top = - Z + 'px';
          }
        } else {
          b.className = '';
          b.style.top = '';
          Z = 0;
        }
      }
      K = Ra.top;
    } else {
      if ((Ra.top - P) <= 0) {
        if ((Ra.top - P) <= R1) {
          b.className = 'stop';
          b.style.top = - R1 +'px';
        } else {
          b.className = 'sticky';
          b.style.top = P + 'px';
        }
      } else {
        b.className = '';
        b.style.top = '';
      }
    }
    window.addEventListener('resize', function() {
      a.children[0].style.width = getComputedStyle(a, '').width
    }, false);
  }
}
})()
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
12.01.2017, 18:02
1. Для благодарности есть кнопка "спасибо"
2. Для того, чтобы блок перестал быть плавающим, дописать
JavaScript
1
2
3
4
5
$(document).ready(function(){
  if ( $(window).width() > 768 ) {
    //тут скрипт плавающего блока
  }
})
вместо 768 свою ширину, когда блок не является плавающим
для того, чтобы работало при ресайзе окна браузера, ту же функцию повесить на событие $(window).resize() с проверкой на ширину окна
1
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
13.01.2017, 04:40  [ТС]
Эм, дружище, извини... я ноль в java (все мои знания основываются на методе тыка)..
Я взял код скрипта плавающего блока, вставил в тот код что предоставил мне ты.. в общем и так работает, правда есть на мой взгляд один несущественный недостаток (блок открепляется только после того как уменьшишь ширину окна браузера И ПЕРЕЗАГРУЗИШЬ страницу, что в моём случае правда не фатально), а вот по поводу
Цитата Сообщение от fol Посмотреть сообщение
ту же функцию повесить на событие $(window).resize() с проверкой на ширину окна
, тут я недогнал малость...

Добавлено через 11 минут
А, врубился что ты хотел этим сказать.. и всё же не в ехал что и куда повесить..
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
13.01.2017, 19:53
Ну, для начала не java, а javascript, это принципиально разные языки программирования. Потом методом тыка будешь очень долго осваивать, т.к. надо знать синтакис.
JavaScript
1
2
3
4
5
$(document).ready(function(){
* if ( $(window).width() > 768 ) {
* * //тут скрипт плавающего блока
* }
})
здесь проверка на ширину экрана: загрузишь страницу с шириной экрана больше 768 - будет плавающий блок, загрузишь страницу с шириной экрана меньше или равно 768 - не будет плавающего блока

далее
$(window).resize() - событие изменения окна браузера
чтобы при ресайзе отрабатывал скрипт, удаляй/добавляй класс или айди у блока, на который вешаешь скрипт плавающего блока
0
2 / 2 / 0
Регистрация: 25.07.2015
Сообщений: 20
14.01.2017, 08:51  [ТС]
Цитата Сообщение от fol Посмотреть сообщение
Ну, для начала не java, а javascript, это принципиально разные языки программирования.
Я в курсе, просто в 5 утра лень что-то писать полностью (каюсь - сократил)
Цитата Сообщение от fol Посмотреть сообщение
Потом методом тыка будешь очень долго осваивать, т.к. надо знать синтакис.
Спорить не стану (сам прекрасно понимаю), но на изучение материала требуется время, а его то у меня как раз практически нет.. Работать по специальности (автокрановщик) возможности нет - требуется опыт, ну или как минимум блат (чтоб без опыта), ни того ни другого у меня естественно нет; работать на стройке, грузчиком и т.д. с сентября прошлого года не могу по состоянию здоровья (грозит инвалидностью); ну и офисной крысой не возьмут - не имею соответствующего образования.. выход один - кровь из носа (пусть и методом тыка) добить начатый проект, запустить и как следствие - получить возможность снова стать самодостаточным.. Во загнул.. Ладно, считайте я этого не писал..
Цитата Сообщение от fol Посмотреть сообщение
$(window).resize() - событие изменения окна браузера
чтобы при ресайзе отрабатывал скрипт, удаляй/добавляй класс или айди у блока, на который вешаешь скрипт плавающего блока
Убил на поиски и разбор 4 часа, результат - 0.. что ни делал, либо ни чего не происходит, либо (что чаще всего) скрипт отрубается и без ресайза.. не получилось и чёрт бы с ним (может в другой раз добью) и без этого работы навалом..
0
0 / 0 / 0
Регистрация: 02.07.2018
Сообщений: 1
02.07.2018, 15:10
Доброго времени суток. Друзья, простите за некропостинг. Попытался прикрутить к сайту на WP 8 вариант с длинным сайтбаром из данной статьи. Сайтбар стал плавающим, однако, при скролле вниз и прилипании к нижней части экрана он почему-то начинает дергаться. Не подскажите, в чем может быть дело и где в коде внести исправления.
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
02.07.2018, 16:22
Vilivonka, я бы посоветовал тему создать- больше вероятность ответа.
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
02.07.2018, 16:22
Помогаю со студенческими работами здесь

В самом низу страницы появляется пустота, но только при развороте
Просматриваю страницу в редакторе - нормуль, смотрю в браузере - нормуль. Но стоит развернуть окно браузера на весь экран, в семерке,...

Как сделать в JasperReports чтобы текст отображался в самом низу страницы при выгрузке из системы отчета в формате HTML?
Отчет в JasperReports состоит из основных Detail и нижнего колонититула. Нижний колонтитул в формате PDF и RTF выгружается с самом низу...

Переместить сайдбар в шаблоне страницы
Есть страница: Вот ее код: &lt;?php /* Template Name: TheKwaliteitTemplateFile */

Сайдбар выделение выбраной страницы
Добрый день! Ребят подскажите можно с помощью css сделать выделение пункта меню сайбара, при переходе на страницу или как...

Заполнить цветом сайдбар до конца страницы
Доброго времени суток, учусь верстать и столкнулся проблемой - у меня не распространяется бекграунд на сайдбаре и контенте. p.s цвет...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru