Make item visible upon scroll?

I Need Help
1

Anyone know of a way to make an item visible once you begin to scroll? I’m wanting to have a small version of the company logo appear on a fixed nav bar once scrolling is initiated, but not before.

2

I’m pretty sure this will get you there.
Adjust the class names to your needs.

<style>
.navbar-brand {
  opacity: 0;
}
.animate-class {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
</style>
<script>
$(window).scroll(function (event) {
  var el = $(".navbar-brand");
  var pos = $(window).scrollTop();
  if ( pos > 0 )
  {
    el.addClass("animate-class");
  }
}); 
</script>
5 Likes
3

@Whittfield, thank you very much for the reply. I will try that when I get a chance! I am impressed at your knowledge of JS. I wish I was better with it! Warm Regards, Randy

1 Like
4

You’re welcome @Creative and thanks for your kind remarks.

This solution is imperfect. It could use a listener to make it more performant. It’s just a quick proof of concept. You can use it in dev maybe, but I’ll improve it after my day gig at some point.

5

It is true that we Blocs users have to mess with code?
Can’t this be accomplished with Custom Classes?

6

The quick and dirty answer is it depends on what you’re doing. Take a look at this example of what Blocs can do without custom code. Apple's Website in Blocs 3

Should speak for itself.

But, no one software can possibly contain all the code you’ll ever need for any situation ever. :wink:

All site builders including Wordpress, Drupal, Sharepoint you name it there’s a field for custom code to be added.

That 's the reason there is such a large aftermarket for plugins with whatever tools you invest in. It’s why the whole plugin market exists. a billion dollar ecosystem. That said Blocs core is about as robust in terms of pure design as I’ve seen without being arduously and overly complex.

1 Like
7

Thanks, @Whittfield for taking the time to reply. You brought up some good points. Maybe, one day I’ll achieve the web building knowledge many of the skilled Blocs designers have, like you. :smile:
My friend @Eldar is on a whole new level.

1 Like
8

I also searched for it. Thank you for your answer, @Whittfield.
It works well. But if I scroll up again, the logo in the navbar should also become invisible again. Is there a solution for that? Many Thanks.

9

Example navbar slide.zip (827.0 KB)

Enclosed I show you an example how I mean it.

1 Like
11

Hello! Would you be willing to show how you accomplished that? That’s exactly what I’m wanting to do! Thanks! - Randy :slight_smile:

12

@Whittfield, do you know how to accomplish the affect that Ymoso shared in her video above? Thank You! - Randy :slight_smile:

13

Hey @Creative

I would encourage you to learn some of this code. It’s a very similar concept to earlier menu code we have helped with before.

You don’t have to become an expert coder. I’m not, but if your making sites commercially, there are some very handy common script elements to learn.

14

@PeteSharp,

"I would encourage you to learn some of this code. It’s a very similar concept to earlier menu code we have helped with before.

You don’t have to become an expert coder. I’m not, but if your making sites commercially, there are some very handy common script elements to learn."

Cool. Thanks. Have a suggestion on a tutorial?

15

I feel like we run your business for you :crazy_face::crazy_face:

Start with what you’re working on at the moment. Google for some Javascript solutions (ideally Vanilla javascript, as apparently Bootstrap 5 is heading in that direction).

Check out stuff like this… https://vanillajsguides.com

I am learning at present as well.