使用固定导航栏时如何避免覆盖正文内容？

Question

bslib::page_navbar

函数有一个

position

参数，可以让我们在向下滚动时保持导航栏可见（

position="fixed-top"

）。然而，正如文档指出的：

请注意，使用“fixed-top”或“fixed-bottom”将导致导航栏覆盖您的正文内容，除非您添加填充，例如：tags$style(type="text/css", "body {padding-top : 70px;}")

我正在尝试这样做，但成效有限。这是我尝试过的：

library(bslib)
library(shiny)
library(lorem) # for mock data
ui <- bslib::page_navbar(
    theme=bslib::bs_theme(version=5), 
    title="Fixed Navbar Demo",
    position="fixed-top",

    # does not work:
    # shiny::tags$style(type="text/css", "body {padding-top: 170px;}"), 

    # this works, but I may not have a h2 tag at the top:
    shiny::tags$style(type="text/css", "h2 {padding-top: 170px;}"), 

    bslib::nav_panel(
        "Menu Entry",
        shiny::h2("Content"),
        lorem::ipsum(paragraphs=10)
    )
)
server <- function(input, output, session) {}
shiny::shinyApp(ui, server)

在 stackoverflow 上搜索，我找到了 bslib::bs_add_rules 和 "affix" 的提示，但我无法让它工作。如何做到这一点？

Answer 1

问题是，由于没有

padding

参数传递给

page_navbar

，因此

0px

默认为

body

，并且这会覆盖

body {padding-top: 170px;}

。因此，您可以通过设置来强制使用您的值

body {
  padding-top: 170px !important;
}

（此处无关，但请将样式包含在

header

的

page_navbar

参数中：

header = tags$head(tags$style(type="text/css", "body {padding-top: 170px !important;}"))

，这样就可以避免警告）。

但是，通过

!important

覆盖默认值通常不是最好的方法。更好的可能性可能是使用 padding

 的 

page_navbar 参数，但随后您可能还需要定义其他值（例如

padding-bottom

）。请注意，它们默认为

bslib-spacer * 1.5

和

bslib-spacer = 1rem

。所以你也可以使用这样的东西：

library(bslib)
library(shiny)
library(lorem) # for mock data

ui <- bslib::page_navbar(
  theme = bslib::bs_theme(version = 5), 
  title = "Fixed Navbar Demo",
  position = "fixed-top",
  
  padding = c(170, "1.5rem", "1.5rem", "1.5rem"),
  
  bslib::nav_panel(
    "Menu Entry",
    shiny::h2("Content"),
    lorem::ipsum(paragraphs=10)
  )
)

shinyApp(ui, \(...){})