Fix the title when scrolling - html

Question

I would like to fix scrolling according to the title in shinydashboard.
I tried some CSS tricks and functions but i don't get the expected result.
Here's my apps :
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)
Some help would be appreciated

Answer 1

try this
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)