Get position of div inside tab in R Shiny Dashboard with jQuery

Question

I have a dashboard with 3 tabs - on the second tab, I need to get the position of the 'subheader' div so that I can trigger an animation on it as the user scrolls down the page, however $('#subheader').position() and $('#subheader').offset() return only 0 & 0 top and left - I imagine this has something to do with the div not existing when the selector is called, since if I use...

$(document).on('scroll', function() {
    console.log($('#subheader').position());
})

...it works correctly, though this doesn't work for my purposes because I only want to get the position on page load. I considered replacing on scroll with on click, but since the id of the tab changes every time the page is refreshed, it's impossible to identify it correctly.

How can I fix this?

Simplified reproducible example:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- fluidPage(
  
  # Set header css to push down main-header
  tags$style(
    "
      #header {
      background-color:grey;
      width = '100%';
      padding:50px;
      }
    "
  ),
  
  # Attempt to get subheader position
  tags$script(
    "
      $(function() {
        console.log('Get position:');
        console.log($('#subheader').position());
        $(document).on('scroll', function() {
          console.log('On-scroll get position:');
          console.log($('#subheader').position());
        })
      })
    "
    
  ),

    # Application title
    titlePanel("Example dashboard"),
    
    tabsetPanel(
      tabPanel(
        "Tab 1"
      ),
      tabPanel("Tab 2",
               div(id = "header", "Example header"),
               div(id = "subheader", "Example subheader"), 
               div(id = "body-text", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque convallis a cras semper
auctor neque vitae tempus. Morbi tristique senectus et netus et malesuada fames ac. Gravida neque
convallis a cras. Semper quis lectus nulla at volutpat diam ut venenatis. Amet consectetur
adipiscing elit pellentesque. In nulla posuere sollicitudin aliquam ultrices sagittis orci a
scelerisque. Nisi vitae suscipit tellus mauris. Ut aliquam purus sit amet luctus venenatis lectus
magna. Diam quam nulla porttitor massa id neque aliquam.

Euismod in pellentesque massa placerat. Et netus et malesuada fames ac turpis egestas. Tortor at
auctor urna nunc id. Viverra adipiscing at in tellus integer. Faucibus et molestie ac feugiat sed
lectus vestibulum. Arcu risus quis varius quam quisque id. Duis convallis convallis tellus id
interdum velit laoreet id. Sollicitudin tempor id eu nisl nunc mi. Maecenas accumsan lacus vel
facilisis volutpat est velit egestas. Sodales neque sodales ut etiam sit. Sed felis eget velit
aliquet. Id ornare arcu odio ut sem nulla pharetra. Eget duis at tellus at urna.

Dignissim cras tincidunt lobortis feugiat vivamus at. Adipiscing elit ut aliquam purus sit amet.
Risus commodo viverra maecenas accumsan. Ut diam quam nulla porttitor massa id neque. At auctor
urna nunc id. Vitae et leo duis ut. Vitae auctor eu augue ut lectus arcu bibendum at varius.
Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Aliquet nec ullamcorper sit
amet risus nullam. Hendrerit gravida rutrum quisque non tellus. Diam maecenas sed enim ut sem
viverra aliquet. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi.

Diam donec adipiscing tristique risus nec feugiat in fermentum. Egestas quis ipsum suspendisse
ultrices gravida. Nisl vel pretium lectus quam id leo. Massa enim nec dui nunc mattis enim ut
tellus. Facilisi morbi tempus iaculis urna id volutpat lacus. Diam donec adipiscing tristique
risus nec. Vestibulum lectus mauris ultrices eros in cursus. Urna et pharetra pharetra massa massa
ultricies. Vel pretium lectus quam id leo in vitae turpis massa. Rutrum tellus pellentesque eu
tincidunt. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor.

Morbi enim nunc faucibus a pellentesque. A arcu cursus vitae congue mauris rhoncus. Bibendum arcu
vitae elementum curabitur vitae nunc sed velit. Enim facilisis gravida neque convallis a cras.
Ornare suspendisse sed nisi lacus sed viverra. Amet tellus cras adipiscing enim eu turpis egestas.
Semper feugiat nibh sed pulvinar proin gravida. Id donec ultrices tincidunt arcu non sodales neque 
odales ut. Maecenas pharetra convallis posuere morbi leo urna molestie at elementum. Est
pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Enim facilisis gravida neque
convallis a cras semper. Aliquam purus sit amet luctus venenatis lectus magna fringilla. Quis
eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Volutpat diam ut venenatis
tellus in metus. Eget velit aliquet sagittis id consectetur purus. Faucibus in ornare quam
viverra. Et egestas quis ipsum suspendisse ultrices. Erat imperdiet sed euismod nisi porta lorem.
Pulvinar proin gravida hendrerit lectus a.")
               ),
      tabPanel("Tab 3")
    )
)


server <- function(input, output) {

   
}

# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

Here is a way. It listens to the scroll event on the document and returns the position after checking that the active tab is the second one.

  tags$head(
    # Set header css to push down main-header
    tags$style(HTML(
      "
      #header {
        background-color: grey;
        width: 100%;
        padding: 50px;
      }
    "
    )),
    
    # get subheader position 
    tags$script(HTML(
      "
      $(document).ready(function() {
        $(document).on('scroll', function() {
          var $activetab = $('ul.nav-tabs li.active a');
          if($activetab.attr('data-value') === 'Tab 2') {
            console.log('On-scroll get position:');
            console.log($('#subheader').position());
          }
        });
      });
    "
    ))
  ),

Note that the scroll event is continuous, ie it is triggered multiple times while the user scrolls. If you want to detect only the end of the scrolling, you can use this jQuery plugin .