dalphyx / vue-headroom

Headroom for Vuejs

vue-headroom

Headroom for Vuejs.

Requirements

• Vue.js ^2.0.0

Installation

$ npm install vue-headroom

Docs & Demo

https://dalphyx.github.io/vue-headroom/

Usage

<template>
  <headroom>
    <header>
      Put your head code here...
    </header>
  </headroom>
</template>

<script>
import headroom from 'vue-headroom'

Vue.use(headroom)

// or
import { headroom } from 'vue-headroom'

export default {
  components: {
    headroom
  }
}
</script>

Props

speed

Transition speed, in ms. Default: 350

easing

Transition function. Default: ease-in-out

disabled

Disable the headroom. Default: false

upTolerance

Scroll tolerance when scrolling up before component is pinned, in px. Default: 5

downTolerance

Scroll tolerance when scrolling down before component is pinned, in px. Default: 0

scroller

Element to listen to scroll events on. Default: () => window

classes

Css classes to apply. Default:

{
  // when element is initialised
  initial : "headroom",
  // when scrolling up
  pinned : "headroom--pinned",
  // when scrolling down
  unpinned : "headroom--unpinned",
  // when above offset
  top : "headroom--top",
  // when below offset
  notTop : "headroom--not-top",
  // when at bottom of scoll area
  bottom : "headroom--bottom",
  // when not at bottom of scroll area
  notBottom : "headroom--not-bottom"
}

offset

Height in px where the header should start and stop pinning. Default: 0

zIndex

The z-index of component. Default: 9999

footroom

Same behaviour but as a footer instead. Default: false

Events

pin

Callback when header is pinned.

unpin

Callback when header is unpinned.

unfix

Callback when header is unfixed.

top

Callback when above offset.

not-top

Callback when below offset.

bottom

Callback when at bottom of page.

not-bottom

Callback when moving away from bottom of page.

License

The MIT License

vue-headroom's Issues

Is there a way to trigger headroom apart from scrolling?

Hi, I'm trying to show the headroom component on a button click. Is there an easy way?

I have looked into the component code but I couldn't find anything.
I also tried to force a window.scrollTo(0, 0) but that didn't trigger the component, and I cannot scroll to another pixel value because... well, because that'd be weird :)

Thanks!

Additional events

Hi, any chance you could add the full suite of Headroom events to this? The onTop one is the one that i need to access. Thanks!

From the headroom docs:

    // callback when pinned, `this` is headroom object
    onPin : function() {},
    // callback when unpinned, `this` is headroom object
    onUnpin : function() {},
    // callback when above offset, `this` is headroom object
    onTop : function() {},
    // callback when below offset, `this` is headroom object
    onNotTop : function() {},
    // callback when at bottom of page, `this` is headroom object
    onBottom : function() {},
    // callback when moving away from bottom of page, `this` is headroom object
    onNotBottom : function() {}

Runtime-only build error when using server-side rendering

Tried using vue-headroom and got the following error:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in component )

tolerance

Hi,

I can't seem to add separate values to both upTolerance and downTolerace. cheers

Height being defined

Loving vue headroom. How is the height of Headroom being defined? We have the need for a sub nav but only on specific pages. We're running into the issue where the sub nav is hidden on first load of these pages, but then shows up when Headroom is activated when the user scrolls back up. We think it's caused by the height since it seems to be defined by JS. Any ideas how to adjust this on specific pages? Thanks!

Change the offset on resize

It's possible to set new value of offset on window resize?

I try change props offset when window is resize, but the vue-headroom not recognized the new value of offset.

content body flashing when headroom element is initialized

Fast network.

Slow network. Did you see that?

I checked the vanilla headroom.js and the flashing issue does not occur.

How to use scroller prop?

Can you give me an example how to use scroller ?

<headroom :scroller="...."></headroom>

Thanks thanks :D

Works only Vue.js 2.0

The mounted function used to set the scroll and height only works in Vue 2.0.
I use it in Vue 1.0.27 and changed it to ready.

downTolerance is ignored when scroll position is 0

Reduced test case:
https://codesandbox.io/s/vue-template-eowu8?fontsize=14

My expectation of the downTolerance prop would be it is consistently used regardless of scroll position.

If for some reason this doesn't make sense I feel like that the prop description should include that it is ignored if the page is already at the top of the scroll box.

ssr中没有效果？

你好，最近在尝试基于nuxt的ssr开发，发现在后端渲染中vue-headroom没有效果？

想应该是后端渲染没有window的缘故，暂未发现解决办法，是否考虑支持ssr?

VueHeadroom not working in Ionic Vue.

I followed how the usage in the docs. Imported the headroom locally, and wrapped my Header inside headroom component. The problem is it is not working, upon investigation, headroom does not emit events as it supposed to do so.

isInTop() Is Broken

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'.

_vm.start is not a function

I'm getting an error with vue 2.5.2 and vue-headroom. Headroom seems to be working as intended, but I'm still getting this error. This error is accompanied by
Property or method "start" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I've setup up everything as described and using vue-cli boilerplate. Help would be appreciated.

Events not working

I created a method to console.log some text, but the events are not working...

<headroom @top="test" @not-top="test">
some stuff
</headroom>

Support for classes based on state?

Hi @dalphyx, Headroom.js supports these:

        initial : "headroom",
        // when scrolling up
        pinned : "headroom--pinned",
        // when scrolling down
        unpinned : "headroom--unpinned",
        // when above offset
        top : "headroom--top",
        // when below offset
        notTop : "headroom--not-top",
        // when at bottom of scoll area
        bottom : "headroom--bottom",
        // when not at bottom of scroll area
        notBottom : "headroom--not-bottom"

Is there a plan to support them in vue-headroom? Or are they already supported somewhere but maybe just not documented? Thanks!

Add classes on initial load.

Hi again, this package doesn't appear to add the headroom specific classes until the user scrolls. The behaviour of the original headroom adds these on load. The headroom--top class is the one that I need to target. Many thanks!

Demos to compare:

http://wicky.nillia.ms/headroom.js/

and

https://dalphyx.github.io/vue-headroom/

cheers

Toggling mobile nav inits headroom and hides the menu

Hi,

I am using vue-headroom with Nuxt. For mobile menu simple toggle method with Tailwindcss. When I click on the hamburger icon to hide/show the mobile menu, it automatically hides the whole navbar.

Example code: https://jsfiddle.net/adamwathan/o1uotjxk/

Any idea what might be causing this? If there is no solution, how do I disable headroom just for mobile breakpoints?

Thank you.

Any advice appreciated.

Safari Issue

Hi,

I'm using your library for my header (version 0.10.1), but we have an issue on safari desktop browser. When a user scroll down and go back back to the top quickly, the header is missplaced. The header is well replaced on a window resize. The issue is also on your demo page :

https://dalphyx.github.io/vue-headroom/

preview on demo here

Any chance to fix that please ?

Many thanks

Is there a way to use headroom outside of component

I am using laravel blade and I declare my vue app with inline script.
I am including a compiled file which contains the headroom import and Vue.use(headroom).
After that i add it to the components of my Vue app with components: { headroom }, but it prints an error in the console: Failed to mount component: template or render function not defined.
How can I use it outside of a vue template ?

pinStart

Have you removed the pinStart prop? That is still something that is useful for my particular use. Thanks

remove styles

Hi there, any chance for the option to remove any inline styles, and just use the classes for CSS changes.

Cheers!

0.10.1 strange behaviour, position: relative and fixed height.

Updating vue-headroom from 0.8.1 to 0.10.1 i've noticed this very strange behaviour,
The new version apply position:relative to the headroom div and creates a wrapper with an inline height in px.
This makes impossible to creates websites with an absolute header (by default) and headroom at the same time.
Had to downgrade to 0.8.1 to make it work.

Any solution? I'd like to keep the latest version!

Update document for Nuxt

Thanks for the awesome plugin! Just want to let you know I'm unable to use <headroom> component, instead I need to use <vue-headroom> for the plugin to work.

import Vue from 'vue'
import vueHeadroom from 'vue-headroom'

Vue.use(vueHeadroom)

Height of wrapper does not respond to media queries

When height of the headroom wrapper is computed, it does not update when the window is resized

Emit event instead of props

Hi, currently some event are used with both $emit and props (pin, unpin) but some others are used with props only (bottom, top, ...).
Shouldn't it be better is they were all using the $emit since it's the "appropriate" solution to manage events in Vue ?