dalphyx / vue-headroom Goto Github PK
View Code? Open in Web Editor NEWHeadroom for Vuejs
Headroom for Vuejs
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.
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.
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/
Any chance to fix that please ?
Many thanks
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)
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.
Hi,
I can't seem to add separate values to both upTolerance
and downTolerace
. cheers
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.
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 )
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 ?
Hi there, any chance for the option to remove any inline styles, and just use the classes for CSS changes.
Cheers!
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.
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 ?
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!
Have you removed the pinStart
prop? That is still something that is useful for my particular use. Thanks
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!
Can you give me an example how to use scroller
?
<headroom :scroller="...."></headroom>
Thanks thanks :D
你好,最近在尝试基于nuxt的ssr开发,发现在后端渲染中vue-headroom没有效果?
想应该是后端渲染没有window的缘故,暂未发现解决办法,是否考虑支持ssr?
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() {}
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'.
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.
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!
When height of the headroom wrapper is computed, it does not update when the window is resized
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!
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
I created a method to console.log some text, but the events are not working...
<headroom @top="test" @not-top="test">
some stuff
</headroom>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.