Scroll + Position:fixed - как бы вы решили?

[ShumNo]

Есть такая разметка, возможно она кривая, но в силу некоторой идеи она такая. http://jsfiddle.net/8rqetnyo/

Вложенный слой со скролом, выполняющий роль основного на странице + фиксированный слой, который перекрывает скролл.

Как бы вы решили? Быть может оно вообще не решается... ?

Была мысль с width: calc но в разных браузерах оно у меня выглядит по разному

 

[mrnobody]

Чрез js можно определить ширину сколллабра и задать right равной этой ширине:

http://jsfiddle.net/mrnobody/8rqetnyo/3/

Определение ширины сроллбара я брал отсюда: https://learn.javascript.ru/task/scrollbar-width

[ShumNo]

Частично вопрос решается заменой fixed на sticky, но частично и не поддерживается старыми браузерами

[ShumNo]

Благодарю. Вариант с js на первый взгляд рабочий.

Но это костыль

[DevChristmas]

Вот так можно : 
 

div#fixed {
    box-sizing:border-box;
    background: #76a7dc;
    color: #fff;
    position:fixed;
    top:0;
    height:50px;
    width:100%;
    left:-18px;
    padding-left:25px;
}

Но в другом браузере да , будет косяк с шириной скролла , но эту проблему можно решить через @media , и под определённые браузеры менять свойство left .

Edited September 17, 2017 by DevChristmas

[andrey7287]

19 часов назад, ShumNo сказал:

но в силу некоторой идеи она такая

Уж не знаю что там за идея, но причина - кривая разметка а вы боретесь со следствием . 

[ShumNo]

2 часа назад, andrey7287 сказал:

Уж не знаю что там за идея, но причина - кривая разметка а вы боретесь со следствием . 

На самом деле даже не в разметке, а в стилях. Потому как если вынести слой fixed из под sidebar то эффект будет тот же самый - fixed перекроет скролл.

То есть свойство fixed в позиционировании будет перекрывать скролл даже если ширина там будет 100%. С одной стороны это логично, а с другой бывают разные ситуации.

10 часов назад, DevChristmas сказал:

Вот так можно : 
 

div#fixed {
    box-sizing:border-box;
    background: #76a7dc;
    color: #fff;
    position:fixed;
    top:0;
    height:50px;
    width:100%;
    left:-18px;
    padding-left:25px;
}

Но в другом браузере да , будет косяк с шириной скролла , но эту проблему можно решить через @media , и под определённые браузеры менять свойство left .

Это примерно из той же оперы что и width: calc(100% - ширина скрола) только она везде разная да. Быть может в этом случае в какой-то мере актуален свой скрол одинаковой ширины во всех браузерах, но это не лучший вариант

[andrey7287]

А понятно,  height: 200px там

 

4 часа назад, ShumNo сказал:

только она везде разная да.

var scrollWidth = window.innerWidth - document.documentElement.offsetWidth;