Shiny-app顶部导航栏如何实现模糊效果

Question

我试图在我的Shiny-app 的顶部导航栏上实现blurred 效果，如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éphane Laurent 的回复编辑 -

修改后的应用程序 -

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 的内容元素。

Answer 1

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; };
});