Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
0 / 0 / 2
Регистрация: 29.11.2015
Сообщений: 44

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

20.01.2017, 18:10. Показов 2135. Ответов 6
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Всем добрый вечер. Суть вопроса: надо сделать фиксированный сайдбар, чтобы при скролле он был всегда справа, но чтобы не было пустого пространства. До скролла все нормально (отступ идет от шапки), но после скролла остается пустое пространство. Возможно ли это сделать средствами CSS, если да, то как? Вот скрины: del

Код html:
HTML5
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

<!DOCTYPE html>
<html>
<head>
    <title>Test page</title>
    <link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="header">
        <a href="#" class="buttom">Главная</a>
        <a href="#" class="buttom">Услуги</a>
        <a href="#" class="buttom">Информация</a>
        <a href="#" class="buttom">Связь</a>
    </div>
    <div class="sidebar">
        Some text;
    </div>
    <div class="main">
        <a href="#">Click!</a><br>
        Проверка text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;
    </div>
    <div class="footer">
        Footer text
    </div>
</body>
</html>
Код CSS:
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
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

* {
    margin: 0; 
    padding: 0; 
    /*border: solid;*/
}
 
a {
    color: red;
    transition: 0.5s;
}
 
a:hover {
    color: green;
}
 
a.buttom {
    color: #404040;
    transition: 0.5s;
}
 
a.buttom:hover {
    opacity: 0.9;
    color: #FFF;
}
 
body {
    background-color: #CFCFCF;
}
 
.header {
    padding: 1% 0 0 1%;
    /*height: 40%;*/
    /*width: 100%;*/
    background-color: #707070;
    box-sizing: border-box;
}
 
.buttom {
    width: 100px;
    height: 30px;
    background-color: #FF6B6B;
    text-align: center;
    display: inline-block;
    bottom: 0;
}
 
.main {
    margin: 1%;
    padding: 1%;
    min-height: 50px;
    width: 70%;
    background-color: white;
    position: relative;
}
 
.sidebar {
    margin: 1% 0 1% 0;
    padding: 1%;
    background-color: white;
    min-height: 150px;
    width: 23%;
    position: fixed;
    right: 1%;
}
 
.footer {
    width: 100%;
    height: 50px;
    position: relative;
    bottom: 0px;
    padding: 1% 0 0 0;
    box-sizing: border-box;
    text-align: center;
    background-color: #707070;
    color: #E3E3E3;
}
0
Лучшие ответы (1)
Сообщение: #10027312
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 20.01.2017, 18:10
Ответы с готовыми решениями:

Фиксированное меню при скролле
Всем привет. Я заметил одну интересную шапку у лпгенератор(не реклама). У них при скролле появляется меню, слева логотип, по...

Прокуртка блока при скролле
Добрый день, как можно реализовать по блочный скролл? Пример: http://muse-widgets.ru/demo/applescroll/

Фиксатор меню(при скролле)
Собственно, проблема заключается в том, что меню отказывается фиксироваться при скролле. &lt;div id=&quot;header&quot;&gt; ...

6
 Аватар для Janosense
45 / 41 / 22
Регистрация: 28.01.2015
Сообщений: 162
20.01.2017, 21:31
Рискну предположить что средствами одного css задачу решить невозможно.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
20.01.2017, 22:48
Prolific, посмотрите готовые решения: Плавающий блок. Быть может что-то увидите для себя интересное.
0
30 / 28 / 14
Регистрация: 06.01.2016
Сообщений: 161
20.01.2017, 22:59
Лучший ответ Сообщение было отмечено Prolific как решение

Решение

HTML5
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

<body>
    <div class="header">
        <a href="#" class="buttom">Главная</a>
        <a href="#" class="buttom">Услуги</a>
        <a href="#" class="buttom">Информация</a>
        <a href="#" class="buttom">Связь</a>
    </div>
    
    <div class="main">
        <a href="#">Click!</a><br>
        Проверка text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;<br>
        Some text;
    </div>
    <div class="sidebar">
        Some text;
    </div>
    <div class="footer">
        Footer text
    </div>
</body>
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
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

* {
    margin: 0; 
    padding: 0; 
    /*border: solid;*/
}
 
a {
    color: red;
    transition: 0.5s;
}
 
a:hover {
    color: green;
}
 
a.buttom {
    color: #404040;
    transition: 0.5s;
}
 
a.buttom:hover {
    opacity: 0.9;
    color: #FFF;
}
 
body {
    background-color: #CFCFCF;
}
 
.header {
    padding: 1% 0 0 1%;
    /*height: 40%;*/
    /*width: 100%;*/
    background-color: #707070;
    box-sizing: border-box;
}
 
.buttom {
    width: 100px;
    height: 30px;
    background-color: #FF6B6B;
    text-align: center;
    display: inline-block;
    bottom: 0;
}
 
.main {
    margin: 1%;
    padding: 1%;
    min-height: 50px;
    width: 70%;
    background-color: white;
    position: relative;
    float: left;
}
 .sidebar {
   background-color: white;
   width: 23%;
   min-height: 150px;
   float: right;
   margin: 1%;
 }
.fix-sidebar {
    
    padding: 1%;
    position: fixed;
    right: 1%;
    top: 0;
}
 
.footer {
    width: 100%;
    height: 50px;
    position: relative;
    bottom: 0px;
    padding: 1% 0 0 0;
    box-sizing: border-box;
    text-align: center;
    background-color: #707070;
    color: #E3E3E3;
    clear: both
}
JavaScript
1
2
3
4
5
6
7

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    var headerHeight = $('.header').outerHeight();
  console.log(headerHeight)
  scroll > headerHeight ? $('.sidebar').addClass('fix-sidebar')
  : $('.sidebar').removeClass('fix-sidebar')
});
https://jsfiddle.net/Andrey7287/vrx2cxob/
ЗЫ Стили сами поправите. Вообще затея всё делать в процентах не самая лучшая.
1
0 / 0 / 2
Регистрация: 29.11.2015
Сообщений: 44
22.01.2017, 13:00  [ТС]
Почему плохо в процентах? По-идее под любые экраны будет подгоняться же?
0
84 / 81 / 42
Регистрация: 20.01.2017
Сообщений: 219
22.01.2017, 14:42
просто как вариант сделайте и хидер фиксированым.
0
0 / 0 / 2
Регистрация: 29.11.2015
Сообщений: 44
22.01.2017, 15:08  [ТС]
Сделать хедер фиксированным - это костыль, а не решение)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 22.01.2017, 15:08
Помогаю со студенческими работами здесь

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

Отступить от верха при скролле
Товарищи, прошу помощи в такой задачке : есть некий div у которого есть background-image . Размер картинки-фона устанавливаются с...

Фиксированое меню при скролле
Доброго времени суток. Есть липкое меню, оно хорошо и правильно работает. Кроме одного случая. Некоторое содержимое блока приходит с...

Сбивается позиционирование при наведении на выпадающие меню
Доброго времени суток, создал выпадающее меню на Js и возникла проблема, при наведении на меню позиционирование сбивается, как можно было...

Анимация только при скролле.
Хочу чтобы у меня работала анимация только при скролле! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru