Stack Overflow
Stack Overflow

Questions tagged [headroom.js]

a lightweight, pure JavaScript widget for hiding elements

15 questions
13
votes
1 answer

Headroom.js header with initial static state

I'm using the awesome Headroom.js plugin to build an auto-hiding header. The header is static from start and becomes pinned after an offset (when scrolling down) and then back to static (when it's back to the top). Here is what I have…
Fred K
  • 13,249
  • 14
  • 78
  • 103
3
votes
1 answer

Is it fine to mutate attributes of React-controlled DOM elements directly?

I'd like to use headroom.js with React. Headroom.js docs say: At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event. Would it be fine to use it directly with elements controlled by React?…
mik01aj
  • 11,928
  • 15
  • 76
  • 119
2
votes
1 answer

Android browser hiding bar which is position:fixed to bottom of screen

I have an 'account bar' fixed to the bottom of the screen using position:fixed and I'm auto hiding it when te user scrolls down the page using a plugin called headroom.js This works perfectly on every browser except Android Browser (Samsung Galaxy…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
1
vote
1 answer

Headroom.js navbrand and navlinks

I am using Headroom.js in my bootstrap website, and so far so good, working fine the way I want. I have a question though: Is there any way to change navbrand and customize navlinks when in "notTop"?! Let me be clearer, When fixed, I use a…
Bogdan Puscasu
  • 15
  • 4
1
vote
1 answer

How to get an component height to trigger Headroom in React?

This is my first time dealing with Gatsby and React, so I might be using the wrong approach on this matter. Anyway, this is what is going on. From the gatsby-starter-hello-world, I'm building this site that will be composed of a front page with a…
EdBucker
  • 63
  • 1
  • 3
1
vote
3 answers

Headroom.js with Typescript can't find the module

Anyone got this working in Typescript land? Googling around and it appears not. Tying to incorporate this library into my Browserify project without any luck. I have this typings file for v0.9.3 of…
Simon
  • 2,484
  • 6
  • 35
  • 54
1
vote
0 answers

Headroom.js options with Enquire.js

I need to have different offset in Headroom.js depending on screen size. Enquire.js should do the trick, but I can't get it work properly. It only loads one offset setting per page load, even though it's the right one on load, but it doesn't switch…
ransu
  • 11
  • 1
0
votes
0 answers

jQuery scrollTop scrolls the collapsed navbar on mobile

I'm using jQuery to achieve a scroll-to effect (clicking on a navbar item to scroll to a section of the page). $(document).ready(function(){ $(".js-scroll-trigger").on('click', function(event) { if (this.hash !== "") { …
gjan
  • 1
  • 1
0
votes
0 answers

Offsetting fixed position header for in-document anchor links

I have a page which makes use of the following: Headroom.js for a header which "slides out of view when scrolling down and slides back in when scrolling up" HTML links to internal sections Smooth scrolling I want to ensure that, when the page…
Adam Williams
  • 1,712
  • 3
  • 17
  • 30
0
votes
1 answer

Prevent hiding navigation bar when scroll is set programmatically

I have a navigation bar which becomes hidden when the user scrolls down and is shown when the user scrolls up. Similar behavior is implemented in the Headroom.js library. The logic of hiding and showing is called on the scroll event. I also have a…
monstasat
  • 63
  • 5
0
votes
1 answer

Transparent background becomes black when changing from solid colour in Safari

I use headroom.js to hide/show navbar on scroll. Works great. On scrolling up, nav has a solid background colour and when nav is at top, background should be transparent. No issues on Chrome but an issue with Safari. Markup:
Sylar
  • 11,422
  • 25
  • 93
  • 166
0
votes
1 answer

Using Headroom.js with WordPress

I would like to use headroom.js on my site to be able to hide the header as I scroll down and have it reappear as I scroll up. I am using WordPress. I tried putting the js file in the theme folder and calling it with functions.php, but it didn't…
KnitBecca
  • 1
  • 1
0
votes
2 answers

How to get headroom.js working / step-by-step

I really like the headroom.js but I just can not get it working. Some kind of step-by-step instruction would be great. So here is what I did so far... I downloaded the git repro Included the scripts to my html file right before my closing body tag…
boehmatron
  • 713
  • 5
  • 15
0
votes
2 answers

Jquery - Toggle between 2 functions when clicking

I am implementing Headroom.js in one of my websites. Due to usability reasons I need to be able to toggle between initializing and destroying the script when the user clicks on a specific div. This div's id is #hamburger This is my code so…
Johann
  • 681
  • 3
  • 13
  • 30
0
votes
1 answer

jquery - Refresh a function on $(window).resize using headroom.js

I'm trying to initiate the script from headroom.js (http://wicky.nillia.ms/headroom.js/) to trigger when an element hits the top of the page. The position of the element will change if the window is resized. My problem: the offset value of the…
vincent
  • 11
  • 3