带有滚动功能的闪亮仪表板中的粘性侧边栏答案

【问题标题】：Sticky sidebar in shiny dashboard with scrolling带有滚动功能的闪亮仪表板中的粘性侧边栏
【发布时间】：2021-12-25 17:08:59
【问题描述】：

我有一个闪亮的应用程序，它有很长的垂直页面，需要用户滚动。仪表板有一个带有过滤器的侧边栏面板。该侧边栏具有固定位置，以便用户始终可以看到他们选择了哪些过滤器。不幸的是，侧边栏本身被屏幕底部截断。我想实现一些javascript，以便在滚动时侧边栏是“粘性的”，如this other stackoverflow post 或this example。我该怎么做？我不熟悉将 javascript 添加到闪亮的应用程序。谢谢！

请参阅下面的可重现示例。

library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinythemes)
library(plotly)
library(htmltools)
library(shinyjs)

######################
#UI###################
######################

ui <- navbarPage("Example", theme = shinytheme("flatly"),
                 
                 header = tagList(
                   useShinydashboard(),
                   useShinyjs()
                 ),
                 
                 tabPanel("Tab",
                          fluidRow(column(12,
                                          h1("Text"),
                                          br(),
                                          br(),
                                          h4("Text"),
                                          p("Use the filters on the left to explore data"))),
                          hr(),
                          fluidRow(sidebarPanel(style = "position: fixed; overflow: auto; width:24%;margin-bottom:50px","Inputs",
                                                width = 3,
                                                h4("Filters"),
                                                helpText("Chose parameters to narrow down the dataset."),
                                                pickerInput(inputId = "a", label = "a", choices = c(seq(1,5,1)), selected = 1, multiple = TRUE),
                                                pickerInput(inputId = "b", label = "b", choices = c(seq(1,5,1)), selected = 1, multiple = TRUE),
                                                pickerInput(inputId = "c", label = "c", choices = c(seq(1,5,1)), selected = 1, multiple = TRUE),
                                                pickerInput(inputId = "d", label = "d", choices = c(seq(1,5,1)), selected = 1, multiple = TRUE),
                                                helpText("Test.")
                          ),
                          mainPanel(fluidRow(infoBoxOutput("total")),
                                    plotlyOutput("stuff1"),
                                    h4("About this Chart"),
                                    htmlOutput("stuff2"),
                                    hr(),
                                    br(),
                                    br(),
                                    plotlyOutput("stuff3"),
                                    h4("About this Chart"),
                                    htmlOutput("stuff4"),
                                    hr(),
                                    br(),
                                    br(),
                                    fluidRow(plotlyOutput("stuff4"),plotlyOutput("stuff5")),
                                    h4("About this Chart"),
                                    htmlOutput("stuff6"),
                                    hr(),
                                    br(),
                                    br(),
                                    fluidRow(plotlyOutput("stuff7"),plotlyOutput("stuff8")),
                                    h4("About this Chart"),
                                    htmlOutput("stuff9"),
                                    hr())
                          )))

######################
#SERVER###############
######################

server <- function(input, output, session) {
  
}


shinyApp(ui, server)

【问题讨论】：

标签： javascript css r shiny

【解决方案1】：

如果没有看到呈现的 HTML 或 CSS，请尝试在侧边栏元素上使用这个 CSS。侧边栏将始终为浏览器窗口高度的 100%，使其下方的内容滚动。

.sidebar {
    background: #F4F4F4;
    height: 100vh;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    width: 360px;
}

【讨论】：