Javascript 如何在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\u Body1

的元素变得模糊，我的目标是模糊

navbarPage1

1）内容的元素，您复制了SCSS代码，而不是CSS代码（

@extend

不是CSS）。以下是CSS：

#App#u Body{
高度：自动；
最小高度：10px；
宽度：100%；
保证金：0自动；
填充：0；
背景色：rgba（0,0,0,0）；
字体系列：“Calibri”；
位置：相对位置；
}
#模糊卷轴，#应用程序#正文1{
排名：0；
左：0；
宽度：100%；
身高：5雷姆；
溢出：隐藏；
位置：固定；
-webkit过滤器：模糊（4px）；
过滤器：模糊（4px）；
}
#附件1{
高度：70像素；
宽度：100%；
保证金：0；
填充：0；
背景色：rgba（0,0,0,0）；
位置：固定；
排名：0；
左：0；
右：0；
显示器：flex；
弯曲方向：行；
文本对齐：左对齐；
对齐项目：居中；
对正内容：左；
边框底部：0px实心#6A6A；
z指数：4；
}

2） 您在JS代码中键入了

navbarPage11

，而不是

navbarPage1

3） 您必须将JS代码封装在

$（document）.ready（function（）{…}）中。以下是JS代码：

$（文档）.ready（函数（）{
var pageContent=document.getElementById（\“navbarPage1\”），
pagecopy=pageContent.cloneNode（真），
blurryContent=document.getElementById（\“blurryscroll\”）；
blurryContent.appendChild（页面复制）；
window.onscroll=function（）{blurryContent.scrollTop=window.pageYOffset；}；
});
Hey@Bogaso-示例中有一个错误。我在
tabPanel
中发现一个错误：
buildTabset（…）中的错误：选项卡都应该是未命名的参数，但有些被命名为：style
。已更正。现在天气很好。谢谢你让我知道，不幸的是我还是没有达到预期的效果。我想模糊navbarPage1内容的元素，但现在App_Body1的内容越来越模糊blurred@Bogaso
AppBody
div的作用是什么？它只是我原始应用的一个容器，可以带来一些特殊的样式
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)