toc_float doesn't stick on mobile

[xiaoouwang]

By filing an issue to this repo, I promise that

• [x] I have fully read the issue guide at https://yihui.name/issue/.
• [x] I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('rmarkdown'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('rstudio/rmarkdown').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• [x] I have learned the Github Markdown syntax, and formatted my issue correctly.

The toc stops being sticky when the page is viewed in small devices, it's responsive in that it goes on the top however it is no longer sticky.

working example here

---
title: "Untitled"
author: "Wang"
date: "4/18/2019"
output: 
  html_document:
    toc: true
    toc_float: true

---
## 1 
<form action="POST">
      First Name: <input type="text" name="firstName" id="firstName"><br>
      Last Name: <input type="text" name="lastName" id="test" minlength="5"><br>
      Email: <input type="email" name="email" id="email"><br>
      Password: <input type="password" name="password" id="password" ><br>
      Birthday: <input type="date" name="birthday" id="day">
      Gender:<br>
      <input type="radio" name="gender" id="Male">Male<br>
      <input type="radio" name="gender" id="Male">Female<br>
      <input type="radio" name="gender" id="Male">Other<br>
      Pets: <br>
      <input type="checkbox" name="cat" id="cat">Cat<br>
      <input type="checkbox" name="dog" id="dog">Dog<br>
      <input type="checkbox" name="cow" id="cow">cow<br>
      Cars: <br>
      <select name="cars" id="">
        <option value="Volvo">Volvo</option>
        <option value="Audi">Audi</option>
      </select><br>
      <input type="submit" value="Register!">
      <input type="reset" value="reset">
      </form>
## 2 
css
.class
#id
*
element
element, element # both
element1 element2 # element inside
element > element2 # element direct child
element + element2 # immediate neighbor
:hover
:last-child
:first-child
!important (not recommended)
px
5em # 5 times the containing element
5rem # root font size
-Specificity-Importance-Source Order    "

[cderv]

It seems I can reproduce this issue. Here is a published doc: https://beta.rstudioconnect.com/content/15934

Code

````markdown --- title: "Untitled" author: "Wang" date: "4/18/2019" output: html_document: code_download: true toc: true toc_float: true --- This shows an issue from https://github.com/rstudio/rmarkdown/issues/1571 This file viewed on a mobile phone will have its toc behave weirdly. That is you can't select a subheader correctly # Header 1 ## Sub Header 1 ### Sub Sub header 1 # Header 2 ## Sub Header 2 ### Sub Sub header 2 ````

If you go on mobile on this doc, it is difficult to select a header in the doc.

Surely related to tocify.js on mobile.

Thanks for the report

[cderv]

Looking at this after some time and I wonder how this should be working for a floating TOC. Mobile space is too small to have something floating and sticky on the side. Having the TOC only at the top make sense and we can't make it sticky while scrolling in this case.

Having another behavior would be like a navbar and have the TOC to be collapsible in a small menu (like hamburger menu in website navbar) that could be sticky while scrolling in that case.

We could also have a "return to the top" floating button at the bottom so that it is easy when scrolling a document on mobile to go back to TOC which is on the top.

Just ideas - I don't really know how much CSS this would require. Maybe bootstrap as some interesting helper. tocify.js is quite old and not really maintained it seems.