如何在R中使粘性导航条闪亮?

a11xaf1n  于 2023-05-04  发布在  其他
关注(0)|答案(1)|浏览(130)

我有一个闪亮的应用程序与导航栏,我想让这个导航栏粘性。我检查了this page,在那里解释了这一点,我试图把CSS和JS代码放在shiny中,但没有成功(要看到这一点,运行应用程序,在表中选择50或100个观察结果,然后向下滚动)。

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)

有没有可能让导航条粘起来?

nxowjjhe

nxowjjhe1#

您可以在navbarPage中使用position = c("fixed-top")。这是你的问题。

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)

相关问题