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

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

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

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

CSS

header{ 
    position: fixed;
    width: 1280px;
    height: 200px;
    background: #2D6C2F;
    z-index: 1;
    overflow: inherit;
}

@plohoyav · 28.05.2017, 23:27

HTML5

<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

header{ 
position: fixed;
width: 1280px;
height: 200px;
background: #2D6C2F;
z-index: 1;
overflow: inherit;
}

position: relative;

	29.05.2017, 04:00

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

Решение