滚动时修复标题

Question

我想根据 shinydashboard 中的标题修复滚动。

我尝试了一些 CSS 技巧和功能，但没有得到预期的结果。

这是我的应用程序：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

############# UI ############
body <- dashboardBody(

  tabItems(
    tabItem(tabName = "tab1",
            fluidRow(
              div(tags$h1('My title : Fix scrolling according to this title')),
            ),
            
            fluidRow(
              tags$p('some text')
            )
    )
  )
  
  
)

ui <- dashboardPage(
  
  title = "Example",
  options = list(sidebarExpandOnHover = TRUE),
  header = dashboardHeader(disable = FALSE),
  sidebar = dashboardSidebar(
    minified = TRUE, collapsed = TRUE,
    sidebarMenu(id="menu",
                menuItem("first tab", tabName =  "mytab", icon = icon("fas fa-acorn"),
                         menuSubItem('menu1',
                                     tabName = 'tab1',
                                     icon = icon('fas fa-hand-point-right'))
                )
    )
  ),
  body
)


############# SERVER ############
server <- function(input, output) {}


shinyApp(ui = ui, server = server)

一些帮助将不胜感激

Answer 1

试试这个

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

############# UI ############
body <- dashboardBody(
    
    tabItems(
        tabItem(tabName = "tab1",
                fluidRow(
                    id = "mytitle",
                    div(tags$h1('My title : Fix scrolling according to this title')),
                ),
                fluidRow(
                    lapply(1:50, br),
                    h3('some text'),
                    lapply(1:50, br),
                    h3('some text'),
                    lapply(1:50, br),
                    h3('some text')
                ),
                tags$script(HTML(
                    "
                    $(window).scroll(function() {
                        var height = $(window).scrollTop();
                        var el = $('#mytitle');
                        if(height  > 50) {
                            el.addClass('fix-top');
                        } else {
                             el.removeClass('fix-top');
                        }   
                    });
                    "
                )),
                tags$style(
                    "
                     .fix-top {
                        position: fixed;
                        height: 80px;
                        width: 100%;
                        background-color: #ecf0f5;
                        top: 0;
                     }
                    "
                )
        )
    )
    
    
)

ui <- dashboardPage(
    
    title = "Example",
    options = list(sidebarExpandOnHover = TRUE),
    header = dashboardHeader(disable = FALSE),
    sidebar = dashboardSidebar(
        minified = TRUE, collapsed = TRUE,
        sidebarMenu(id="menu",
                    menuItem("first tab", tabName =  "mytab", icon = icon("fas fa-acorn"),
                             menuSubItem('menu1',
                                         tabName = 'tab1',
                                         icon = icon('fas fa-hand-point-right'))
                    )
        )
    ),
    body
)


############# SERVER ############
server <- function(input, output) {}


shinyApp(ui = ui, server = server)

滚动时修复标题

Fix the title when scrolling

html

css

shiny

css-position

shinydashboard