我试图在blurred的顶部导航栏上实现Shiny-app效果，如https://codepen.io/dudleystorey/pen/RNMbGG所述。
下面是我的shiny-app-
library(shiny)
ui =
shinyUI(fluidPage(
tags$head(
tags$style(HTML("
#App_Body {
height: auto;
min-height: 10px;
width: 100%;
margin: 0 auto;
padding: 0;
background-color: rgba(0,0,0,.0);
font-family: 'Calibri';
position: relative;
}
#blurryscroll {
top: 0; left: 0;
width: 100%;
height: 100px;
overflow: hidden;
position: fixed;
filter: blur(4px);
}
#App_Body1 {
@extend #blurryscroll;
filter: none;
height: 70px;
width: 100%;
margin: 0;
padding: 0;
background-color: rgba(0,0,0,.0);
position: fixed;
top: 0; left: 0; right: 0;
display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: left;
border-bottom: 0px solid #6a6a6a;
z-index: 4;
}
"))
),
tags$head(HTML("<script>
var pageContent = document.getElementById(\"navbarPage11\"),
pagecopy = pageContent.cloneNode(true),
blurryContent = document.getElementById(\"blurryscroll\");
blurryContent.appendChild(pagecopy);
window.onscroll = function() { blurryContent.scrollTop = window.pageYOffset; }
</script>
")),
div(id = "App_Body",
div(id = "blurryscroll", `aria-hidden` = TRUE),
div(id = "App_Body1",
HTML("What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")
)
),
navbarPage(id = "navbarPage1", "Analysis navbarPage1",
tabPanel(tabName = "Page1",
"Page1",
div(id = "navbarPage11", style = "height: 2000px; width: 20%; background-color: rgba(0,0,0,.3);",
HTML("What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")
)
)
)
))
server = function(input, output, session){}
shinyApp(ui = ui, server = server)
从那里可以看出，尽管实现了链接中介绍的类似方法，我的App仍未能带来模糊的效果。
您能帮我了解我的方法究竟出了什么问题吗？
任何指针都会受到赞赏。
根据StéphaneLaurent的回复进行编辑-
修改后的应用-
ui =
shinyUI(fluidPage(
tags$head(
tags$style(HTML("
#App_Body {
height: auto;
min-height: 10px;
width: 100%;
margin: 0 auto;
padding: 0;
background-color: rgba(0, 0, 0, .0);
font-family: 'Calibri';
position: relative;
}
#blurryscroll, #App_Body1 {
top: 0;
left: 0;
width: 100%;
height: 5rem;
overflow: hidden;
position: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
#App_Body1 {
height: 70px;
width: 100%;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, .0);
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
text-align: left;
align-items: center;
justify-content: left;
border-bottom: 0px solid #6a6a6a;
z-index: 4;
}
"))
),
tags$head(HTML("<script>
$(document).ready(function(){
var pageContent = document.getElementById(\"navbarPage1\"),
pagecopy = pageContent.cloneNode(true),
blurryContent = document.getElementById(\"blurryscroll\");
blurryContent.appendChild(pagecopy);
window.onscroll = function() { blurryContent.scrollTop = window.pageYOffset; };
});
</script>
")),
div(id = "App_Body",
div(id = "blurryscroll", `aria-hidden` = TRUE),
div(id = "App_Body1",
HTML("What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")
)
),
div(id="content",
navbarPage(id = "navbarPage1", "Analysis navbarPage1",
tabPanel(tabName = "Page1",
"Page1",
div(id = "navbarPage11", style = "height: 2000px; width: 20%; background-color: rgba(0,0,0,.3)",
HTML("What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
)
)
)
))
))
server = function(input, output, session){}
shinyApp(ui = ui, server = server)
但是随着App_Body1的这些元素变得模糊，但是我的目标是模糊navbarPage1的内容的元素。
答案 0 :(得分：0)
1）您复制了SCSS代码而不是CSS代码（@extend不是CSS）。这是CSS：
#App_Body {
height: auto;
min-height: 10px;
width: 100%;
margin: 0 auto;
padding: 0;
background-color: rgba(0, 0, 0, .0);
font-family: 'Calibri';
position: relative;
}
#blurryscroll, #App_Body1 {
top: 0;
left: 0;
width: 100%;
height: 5rem;
overflow: hidden;
position: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
#App_Body1 {
height: 70px;
width: 100%;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, .0);
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
text-align: left;
align-items: center;
justify-content: left;
border-bottom: 0px solid #6a6a6a;
z-index: 4;
}
2）您在JS代码中键入了navbarPage11而不是navbarPage1。
3）您必须将JS代码封装在$(document).ready(function(){...});中。这是JS代码：
$(document).ready(function(){
var pageContent = document.getElementById(\"navbarPage1\"),
pagecopy = pageContent.cloneNode(true),
blurryContent = document.getElementById(\"blurryscroll\");
blurryContent.appendChild(pagecopy);
window.onscroll = function() { blurryContent.scrollTop = window.pageYOffset; };
});