I wan’t to do what techcrunch.com mobile website’s header does (see website under mobile web view)
The header is there in the beginning but as you start scrolling down, the header disappears. However if you scroll back up just a bit, the header appears again.
Anyone know how to do this with Bubble?
I’ve never tried this on mobile view before but try adding conditions on the header to appear/disappear when “current page’s scrolling position” is X pixels.
If you need to figure out at what pixel you want the change, add a text box with the text “current page’s scrolling position” and you can use a page preview to figure out the exact pixel.
So I know I can make the header appear/disappear at X pixel.
The problem is triggering the header to appear again as soon as the user scrolls up. This can happen at any pixel.
Kind of hacky…but. What I have done in the past was to just set 2 set states. One to get the current position and set another state to get the previous position. Then if the current position is less than the previous position then show header.
Then do a workflow to update the states each second.
Previous Position = Current position state
Current position = Current Position (new position)
Does that make any sense?
It’s not instant but it still works.
Also, there might be someone else out there that can give you a better solution. I just don’t know one. It might have something to do with some custom JavaScript code or something.
How do you differentiate current and previous positions? How do I tell bubble to calculate previous position?
I think that also you can use only one state with current position and a flow that will trigger each time current scrolling position is < position state
Send the position that was in the current position to the previous position before you save the new current position.
I actually did this in a test app before, I just found it. Here you go:
Viewer: https://805animateheadertest.bubbleapps.io/version-test?debug_mode=true
Editor: https://bubble.io/page?name=index&id=805animateheadertest&tab=tabs-1
What do you mean by position state?
@J805 solution works but it continuously runs that workflow making my Bubble rates go up!
@cdorozco16 Those set custom-state workflows should be client-side only. So it shouldn’t count towards your Bubble server workflow runs.
You can lessen it to every 1.0 second if you want instead of 0.1 seconds or try researching some JavaScript function that might help. 
This was useful, thanks.
Tweaked it a bit for what I believe is a simpler way to make it work (2 steps, 1 state)
Here’s that JavaScript 
[Source: https://codepen.io/blindside85/pen/bpEMEN/]
$(function () {
// show hide subnav depending on scroll direction
var position = $(window).scrollTop();
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
//only piece that matters
$('input')
.stop(true, false)
.animate({
'padding': '0'
}, 'slow')
.removeClass('up')
.addClass('down');
// scrolling downwards, only here for dev purposes
console.log('moving DOWN the page');
$('input').val('down');
} else {
//only piece that matters
$('input')
.stop(true, false)
.animate({
'padding': '40px 0'
}, 'slow')
.removeClass('down')
.addClass('up');
// scrolling upwards
console.log('moving UP the page');
$('input').val('up');
}
position = scroll;
});
});
Needs a little tweaking but should get you on your way if you want to eliminate a workflow running x seconds
I’m working on creating a reusable element with 2 states that will display a simple yes/no on scroll up/down.
Right now it outputs to console only, should be done today or later this weekend.
You can simply copy the reusable element and then use the scroll up/down states to make the header disappear reappear.
App: https://scroll-state.bubbleapps.io/version-test?debug_mode=true
Viewable Editor: https://bubble.io/page?type=page&name=index&id=scroll-state&tab=tabs-1
Hey @varshneyandson, I love your approach! However, is it just me or the blue header doesn’t show up when you scroll up? It only reappears when page scrolling position = 0.
just following up to see how your app is coming along. the desired effect is possible with a plugin i’ve made. kept it private for now as i don’t want to get stuck supporting it, but you are free to try it out. i will however ,need your app name so the plugin can authorize it. then the plugin will appear in your plugins directory.
once you install the plugin, follow these instructions:
This is easily done without states.
See the video for details https://www.youtube.com/watch?v=hMvrKBzuipw
In the video, they are changing the background colour, but you can change anything including whether the group is visible.
Hello, please can I get the plugin?
Thank you.
Please post your app name here or dm me and I’ll add it. 