Sticky sidebar in shiny dashboard with scrolling

Question

I have a shiny app with long vertical pages that require scrolling from the user. The dashboard has a sidebarpanel with filters. That sidebar has a fixed position so that the user can always see what filters they have selected. Unfortunately, the sidebar itself gets cut off by the bottom of the screen. I'd like to implement some javascript so that the sidebar is "sticky" when scrolling as in this other stackoverflow post or this example. How would I do this? I'm new to adding javascript to shiny apps. Thanks!

See the reproducible example below.

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)

score 0 · Answer 1 · answered Dec 25 '21 at 21:36

Without seeing the rendered HTML or CSS try this CSS on the sidebar element. The sidebar will always be 100% the height of the browser window will the content beneath it scrolls.

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

Sticky sidebar in shiny dashboard with scrolling

1 Answers1