Разместить react-sidebar по скролу

161

11 октября 2018, 04:20

Компонент react-sidebar позволяет сделать сайтбар размером с высоту экрана. Мне нужно на сайте с прокруткой, чтоб сайтбар выходил не сверху, а смещенный на высоту скрола. Если я делаю marginTop, то он просто обрезается и не смещается.

<Sidebar
        styles={{
          sidebar: {
            background: "white",
            height: "2000px",
            zIndex: 20,
            maxWidth: "683px",
            backgroundColor: "#edf2f9",
            boxShadow: "-20px 0 50px 0 rgba(0, 0, 0, 0.15)"
          }
        }}
      />

Так выглядит мой сайтбар, он отображается как надо и он ровно на высоту экрана(если прокрутить чуть ниже, он там заканчивается). Мне нужно, если я кликну по элементу не в навбаре или хэдаре, а по какому-то ниже стоящему, чтоб сайт бар так же самого отрисовался на том скроле, где я нахожусь в данный момент

Answer 1

Ничего не понятно, но используете position: fixed и top: 0

Это позволит элементу располагаться относительно окна игнорируя скролл ( то есть он всегда будет виден в окне, если вы проставите нужные координаты )

const container = document.querySelector('.container'); 
const sidebar = document.querySelector('.sidebar'); 
let isShown = false; 
 
container.onclick = function () { 
   isShown ? 
       sidebar.style.display = 'none' : 
       sidebar.style.display = 'block'; 
   isShown = !isShown 
}

.container { 
  height: 5000px; 
} 
 
.sidebar { 
  height: 100%; 
  width: 200px; 
  position: fixed; 
  right: 0; 
  top: 0; 
  background: #333; 
  display: none; 
}

<div class='container'>Кликните для появления sidebar</div> 
<div class='sidebar'></div>

Конкретно в вашем случае попробуйте передавать в компонент стили

root: {
    position: 'fixed',
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отправка заголовков в NodeJS

В серверной части использую вот такие используемые заголовки

177

javascript

ajax запрос в внутри for django

Надо через input изменять цифру внутри input в базе данных templates но запрос отправляется на все и изменяется всё

169

javascript

Случайное число от 1 до 100

Почему в данном коде к результату прибавляется единица?

270

javascript

Не знаю как сверстать не размытую длинную тень от изображения

190