Hi everybody!
With the new Interaction Manager in Blocs 6, is it possible to show or hide a bloc by scrolling?
I would like the logo and navigation to appear smoothly when you scroll down a bit and it should disappear again when you scroll to top.
Thanks for your ideas!
You will probably instead need to use the existing Scroll FX – or – Animation.
@Norm is the Blocs 6 Interaction Manager hooked up to those, or will that be possibly coming? There may be instances where it would be nice to have all 3 features tied together, or do you feel differently in keeping them separated?
It would also be nice to tie in Custom Classes amongst those above 3 features (Scroll FX, Animation, Interaction Manager). Especially now with CSS Transforms & CSS Transitions, basically connect all these features together creating – endless options and possibilities.
By the end of the week is fine, no hurry. 
That’s a cracking idea, would be great if that could be implemented.
Classes are already available in the Interaction Manager, you can toggle, add and remove them from elements.
Hi Norm,
but it’s not possible to link an if statement to scrolling, is it?
Currently the Interaction Manager doesn’t have a way to check conditions such as scroll position, but I think it would be a great addition.
Fortunately, you can do what you want using the Class Editor and the new CSS transitions.
Make the navigation Bloc Sticky.
Add a class hide-nav (Opacity 0, Transition all) and apply it to the navigation Bloc to hide it.
Add a class .sticky-nav.sticky, this class is added when a sticky Bloc becomes stuck. Add a transition, and set the opacity to 1.
The final result.
You can download the example project here. (974.7 KB)
Thanks Norm!
But if I want the navbar to fade in after (for example) 400 px scrolling, I still need JS code, right?
Yeah 400px you would need to add JS right now.
However, it’s giving me an idea for an if conditional rule for the Interaction Manager which I’ll look to add.
If scroll is greater or less than x number of pixels > Do the following (add a class to show section).
I’ll see if I can get that added as I think that would be a simple and useful solution for this type of scenario.
Not looking to derail the thread, but …
Blocs offers many nice features,
My notion is that as nice as they are individually they could really be that much more powerful and beneficial when able to be utilized fully together. Most things are in place it’s just the consideration of how they could all work together seamlessly and what that could offer users.
Maybe something to think about and consider going forward, I think it would offer great potential for users if you could allow these features to work together.
Maybe give it some thought and consideration.
At least I think it would be, anyway I’m sure you get my point. 
I couldn’t resist. 
I’ve added a conditional if statement for checking the scroll Y position, you can set greater than or less than and set a pixel value. Inside this you can assign the rules you want to trigger, in my case it’s to add a class to show the navigation.
Finally I set my scroll custom interaction on the new page scroll interaction.
When the page is scrolled my custom interaction will assign a class show-nav to the element with the id #navigation but only when the scroll Y position is greater than 300px;
I’ll get it tidied up ready for Blocs V6.0.4 release.
So with Blocs V6.0.4, you don’t need JS to do this 
Great! Thanks Norm!
Hey @wolfganghofer,
Blocs 6.0.4 is now available so you can now do this using interactions.
You can now use scroll Y position if conditions:
And trigger an interaction when a page is being scrolled:
You can download an example project here that shows the nav when the page is scrolled 300px here (979.1 KB)
Wonderful!!! It works. Thanks!
Only because you already did that. Brilliant. This whole interaction is like a “visual” JS builder. Thank you!
Yeah that’s exactly what it is, JS Lego.
And it’s only going to get better, got some nice new possibilities planned for 6.1 
So does it accept more complex conditions …
if element.top
if element.height
In other words how do users handle other elements down the page which can change and not based upon hard coded px ? This gets back to my above notion of it being helpful exposing more in the various features across each other.
What about: if, else, else if, switch case, ternary operator – how complex is this JS Lego gonna become. 
Baby steps.
