Как сделать, чтобы fixed-элемент двигался не сразу?

@OpenGoodwin · Регистрация: 15.01.2014

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

Доброй ночи. Есть блок с

CSS
1
 position: fixed;

А я хочу, чтобы у него был отступ от верхней границы 75px;

CSS
1
margin-top: 75px;

Но, когда я прокручу страницу вниз на 75px - этот отступ обнулится. Можно ли как-то это реализовать при помощи css?

Spirt Tesla · 14.01.2016, 04:35

Вам при позиционировании такого рода нужно пользоваться свойствами-left,right,top,bottom.В вашем случае top: 75px.

@OpenGoodwin · 14.01.2016, 05:20 **[ТС]**

Spirt Tesla, top: 75px; это то же самое, что и margin-top: 75px;

Spirt Tesla · 14.01.2016, 05:35

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фиксированное меню</title>
  <style>
   .menu {
    position: fixed; /* Фиксированное положение */
    right: 10px; /* Расстояние от правого края окна браузера */
    top: 20%; /* Расстояние сверху */
    padding: 10px; /* Поля вокруг текста */ 
    background: #ffe; /* Цвет фона */ 
    border: 1px solid #333; /* Параметры рамки */ 
   }
   .text {
    height: 1000px;
   }
  </style>
 </head>
 <body>
  <div class="menu">Меню</div>
  <div class="text"></div>
 </body>
</html>

Вот развернутый пример
Маргин-внешний отступ.
А то что предложил я-координаты.

@Анар · 14.01.2016, 13:53

OpenGoodwin, при помощи css нельзя, задавайте вопрос в разделе js, это тривиальная задача.

Spirt Tesla · 14.01.2016, 14:24

Серьезно?))А проверьте мой ответ,и потом напишите еще раз)

@aj17 · 14.01.2016, 14:34

в jquery есть метод, который считывает высоту при сколе, и когда она будет больше 75px обновляйте себе отступ на здоровье)

Добавлено через 2 минуты
Событие при скроле

@Анар · 14.01.2016, 17:39

Spirt Tesla, напишу ещё раз. CSS не умеет отслеживать факт скрола и считывать сколько px от начала сайта пользователь прокрутил. Перечитайте вопрос ТСа.

Если делать заплатками и дичайшими извращениями, то css-код там будет на несколько порядков больше.

Spirt Tesla · 14.01.2016, 17:59

Сообщение от Анар

Перечитайте вопрос ТСа.

Ну тогда извиняйте,не отрицаю что мог не понять вопрос ТСа)У меня пока с этим вообще сложно,пытаюсь помочь людям,но очень часто не сразу удается понять что же они хотят)

@whiteapps · 15.01.2016, 14:00

OpenGoodwin, такое ощущение что ваш вопрос никак не связан с вашим названием темы
опишите подробнее, что вы хотите

@Анар · 15.01.2016, 18:20

OpenGoodwin, в общем. Если речь идёт про меню, которое не фиксировано, пока пользователь не отскроли 75px, то на css это сделать нельзя (или можно, но слишком сложно), используйте jquery и простой скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
jQuery(function($) {
    $(window).scroll(function(){
        if($(this).scrollTop()>75){
            $('#blockid').addClass('fixed');
            }
        else if ($(this).scrollTop()<75){
                    $('#blockid').removeClass('fixed');
                    }
    });
});

где blockid это id блока, зафиксировать который вам нужно. Скрипт просто добавляет блоку, с указанным id, класс fixed. Соответственно в свою таблицу стилей вы добавляете стили для класса fixed, с фиксированной позицией.
Для работы скрипта нужен jquery.

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	14.01.2016, 04:35
	Вам при позиционировании такого рода нужно пользоваться свойствами-left,right,top,bottom.В вашем случае top: 75px. 0

@OpenGoodwin 7 / 7 / 3 Регистрация: 15.01.2014 Сообщений: 459
	14.01.2016, 05:20 [ТС]
	Spirt Tesla, top: 75px; это то же самое, что и margin-top: 75px; 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	14.01.2016, 13:53
	OpenGoodwin, при помощи css нельзя, задавайте вопрос в разделе js, это тривиальная задача. 0

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	14.01.2016, 14:24
	Серьезно?))А проверьте мой ответ,и потом напишите еще раз) 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	14.01.2016, 14:34
	в jquery есть метод, который считывает высоту при сколе, и когда она будет больше 75px обновляйте себе отступ на здоровье) Добавлено через 2 минуты Событие при скроле 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	14.01.2016, 17:39
	Spirt Tesla, напишу ещё раз. CSS не умеет отслеживать факт скрола и считывать сколько px от начала сайта пользователь прокрутил. Перечитайте вопрос ТСа. Если делать заплатками и дичайшими извращениями, то css-код там будет на несколько порядков больше. 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	15.01.2016, 14:00
	OpenGoodwin, такое ощущение что ваш вопрос никак не связан с вашим названием темы опишите подробнее, что вы хотите 0