search

dalphyx / vue-headroom

Headroom for Vuejs
128 stars 16 forks source link

isInTop() Is Broken #24

Open nickpoulos opened 5 years ago

nickpoulos commented 5 years ago

Maybe I am missing something, but I was seeing odd behavior in that Headroom never seems to get position: relative applied? After trying to see why that was, in headroom.vue I noticed the function: 

isInTop () {
      return this.state === 'pinned' || this.state === 'unpinned'
    }

Are there any other possible states besides 'pinned' or 'unpinned'? It seems this function would always return true, and therefore headroom always stays 'fixed'.

nickpoulos commented 5 years ago

Ok, well it seems upgrading to from v9.x to v10.x fixed that particular issue, being that there is no more isInTop() function, and now position: relative is being set. But now other bizarre behavior has been introduced. The main template now includes a

wrapper with an automatic height being set with inline styles.

Using inline styles anywhere in this template is breaking faith with the original headroom in a big way because the developer loses control of how their header should look/behave.

From the headroom.js docs:

How does it work? At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event:

Relying on CSS classes affords headroom.js incredible flexibility. The choice of what to do when scrolling up or down is now entirely yours - anything you can do with CSS you can do in response to the user's scroll.