Skip to content

jkroso/top-most

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

top-most

respond to the top most visible DOM element changing

Installation

With component, packin or npm

$ {package mananger} install jkroso/top-most

then in your app:

var topmost = require('top-most')

API

topmost(items, [fn])

create a new TopCell. If you pass a function be invoked with the current top-most node and subscribed to future changes. At least ones which arise from the browser resizing or scrolling. Its up to you to notify it of other possible changes such as DOM mutation.

TopCell.buffer(n)

get/set the Cells buffer. Buffer meaning the number of pixels which must be shown before a node is considered "on-screen"

TopCell.change()

check if the top most node has changed. If it has a "change" event will be emitted. You might want to call this after doing some DOM mutation etc..

TopCell.destroy()

clean up

Example

topmost(document.getElementsByTagName('section'))
  .buffer(30)
  .on('change', function(el, index){
    console.log('the %dth item is the top-most', index)
  })
  .change()

Running the Example

Just run make and navigate your browser to example.html.

Thanks

Inspired by and based on timoxley/scroll-position

About

respond to the top most visible DOM element in a collection

Resources

License

Stars

Watchers

Forks

Packages

No packages published