autoscroll + navbar

navscroll.fs

// types 
module Types

open Fable.Import.Browser

let sectionHeaders = [
  "#j1s1"
  "#j2s1"
]

type Model = {
  scrollListener : EventListener option
}

type Msg =
  | AddScrollListener of EventListener option
  
(*-------------------------------------*)

  // update nav bar according to section currently navigated through
  let handleScroll event =

    let pos = window.scrollY
    try
      let selectedSection =
        sectionHeaders // from Type
          |> Seq.map ( fun id ->
            let elem = document.getElementById id
            try
              let pos = elem.getBoundingClientRect().top
              (id, pos)
            with f ->
              (id, 10000.)
          )
          |> Seq.filter( fun (id,pos) -> pos < 10. )
          |> Seq.sortByDescending( fun (id,pos) -> pos )
          |> Seq.map ( fun (id, pos) -> id )
          |> Seq.head
          
(*-------------------------------------*)
          
  // client code
  div [
    ClassName cssClass

    Ref( fun _ ->

      if model.scrollListener.IsNone then
        let mutable listener = EventListener(ignore)
        listener <- EventListener handleScroll
        document.addEventListener("scroll", !^ listener)
        AddScrollListener <| Some listener |> dispatch
    )
    ]