Фиксированная (плавающая) шапка и скролинг

@xark · Регистрация: 26.05.2017

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

Доброго времени суток.
Такой вопрос: фиксированную шапку я сделал но нужно чтобы ее можно было перемещать горизонтальным скролом

CSS
1
2
3
4
5
6
7
8
header{ 
    position: fixed;
    width: 1280px;
    height: 200px;
    background: #2D6C2F;
    z-index: 1;
    overflow: inherit;
}

@plohoyav · 28.05.2017, 23:27

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
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
    body { height: 5000px; width: 5000px; }
    header { background-color: red; width: 150px; height:150px; }
    .scroll_fixed {
        position:absolute;
        top:0;  
    }
    .scroll_fixed.fixed {
        position:fixed;
        top:0;
    } 
</style>
<script>
$(document).ready(function(){
        
var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));
 
 
$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();
 
    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }
    
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
    
});
 
});
</script>
</head>
<body>
<header class="scroll_fixed">&nbsp;</header>
<div>
Quis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla luptatum nisl ut facilisis. Et veniam velit feugait  accumsan magna veniam, nulla vulputate in vero erat duis ea, illum  consequat at, exerci, ullamcorper. Te, dignissim feugiat iusto enim  consequat velit enim enim ea autem nulla eum, accumsan. Tation nisl, eum  in vero blandit et dolore consequat veniam accumsan duis ut eros in  odio delenit. Luptatum hendrerit molestie, et ullamcorper, odio ex, nisl  odio odio iriure minim vel elit exerci dolore, feugait nostrud, dolore  dolor ut. 
Duis autem esse molestie euismod in commodo enim,  exerci qui quis dolore dignissim velit augue, esse et vel et sit iriure  te esse. Molestie autem ut consequat dignissim, facilisi eros quis, et  facilisis consectetuer laoreet aliquip. Suscipit tation dolor dignissim  ex nisl praesent et lobortis eu nulla laoreet zzril ea hendrerit in. 
Vel  nisl ut facilisis nulla veniam velit feugait accumsan magna veniam,  nulla vulputate in vero erat duis ea, illum consequat at, exerci,  ullamcorper duis, dignissim. Iusto iusto enim consequat velit enim enim  ea autem nulla eum, accumsan blandit nisl, eum in. Feugait blandit et  dolore consequat veniam accumsan duis ut eros in odio delenit ea  hendrerit molestie. 
Ullamcorper iriure ut diam aliquam consequat  at lobortis adipiscing praesent, dolore augue. Feugait ad ex aliquam,  eros, eu consequat autem esse molestie euismod in commodo enim, exerci  qui quis dolore dignissim velit augue, esse et vel et sit. Nostrud te  esse ex autem ut consequat dignissim, facilisi eros quis, et facilisis  consectetuer laoreet aliquip eu tation dolor dignissim ex nisl. In et  lobortis eu nulla laoreet zzril ea hendrerit in sed, vel ut facilisi  vulputate, et enim duis et qui praesent hendrerit minim esse facilisis.  Erat autem delenit hendrerit lobortis lorem, te aliquip nostrud te wisi  iusto at eu dolor, vel, suscipit vel veniam vel quis lobortis tation  tation facilisis tation.
</div>
</body>

Добавлено через 2 минуты
В примере "position:absolute", подобие "horizontal fixed" создаётся jquery

@Complex138 · 29.05.2017, 04:00

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

CSS
1
2
3
4
5
6
7
8
header{ 
position: fixed;
width: 1280px;
height: 200px;
background: #2D6C2F;
z-index: 1;
overflow: inherit;
}

position: relative;

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Фиксированная (плавающая) шапка и скролинг

Решение