CODEWITHSUNDEEP
javascriptcssr
bretauv
bretauv

Reputation: 8557

How to make a sticky navbar in R shiny?

I have a shiny app with a navbar and I would like make this navbar sticky. I checked this page where this is explained and I tried to put the CSS and JS code in shiny but without success (to see that, run the app, choose 50 or 100 observations in the table, and scroll down).

library(shiny)
library(dplyr)

ui <- navbarPage(
  tags$head(
    tags$style(HTML("
     #navbar {
      overflow: hidden;
      background-color: #333;
    }
    
    /* Navbar links */
    #navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px;
      text-decoration: none;
    }
    
    /* Page content */
    .content {
      padding: 16px;
    }
    
    /* The sticky class is added to the navbar with JS when it reaches its scroll position */
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
    .sticky + .content {
      padding-top: 60px;
    }
    ")),
    tags$script(
      "// When the user scrolls the page, execute myFunction
      window.onscroll = function() {myFunction()};
      
      // Get the navbar
      var navbar = document.getElementById('navbar');
      
      // Get the offset position of the navbar
      var sticky = navbar.offsetTop;
      
      // Add the sticky class to the navbar when you reach its scroll position. Remove 'sticky' when you leave the scroll position
      function myFunction() {
        if (window.pageYOffset >= sticky) {
          navbar.classList.add('sticky')
        } else {
          navbar.classList.remove('sticky');
        }
      }"
    )
  ),
  tabPanel(
    title = "test tab",
    dataTableOutput("test_table")
  ),
  selected = "test tab"
)

server <- function(input, output, session) {
  
  output$test_table <- renderDataTable({
    mtcars %>%
      bind_rows(mtcars)
  })
  
}

shinyApp(ui, server)

Is it possible to make the navbar sticky?

Upvotes: 2

Views: 1706

Answers (1)

Mike V
Mike V

Reputation: 1354

You can use position = c("fixed-top") inside the navbarPage. It serves your question.

library(shiny)
library(dplyr)

ui <- navbarPage(
  title = "",
  tabPanel(
    title = "test tab",
    br(),
    br(),
    br(),
    br(),
    dataTableOutput("test_table")
  ),
  selected = "test tab",
  position = c("fixed-top")
)

server <- function(input, output, session) {
  
  output$test_table <- renderDataTable({
    mtcars %>%
      bind_rows(mtcars)
  })
  
}

shinyApp(ui, server)

Upvotes: 6

Related Questions