Apply filter to background images on scroll

Webdesign Help
1

Seen this on a few websites. Basically as you scroll the page, the background will blue, or a navabar will slide down from off screen on top. Are these things bootstrap can do or do you need to write custom JavaScript?

2

Neither of these features are available in Bootstrap Studio, but they could be added rather easily with a few lines of JavaScript and some custom CSS.

here’s a simple example of a navbar that disappears when you scroll down, and reappears when you scroll up.

1 Like
3

I use what @printninja has given in his reply on my website.
Tweaked it a bit, but that’s probably the best tutorial for hiding the navbar when scrolling.

It’s worth reading and following along for what you’re looking for.

4

@printninja

The javascript examples from the site you recommend are a bit outdated

Both window.onscroll and window.addEventListener('scroll', function() {}) can be used to attach a scroll event handler in JavaScript, but window.addEventListener('scroll', function() {}) is generally considered the more modern and flexible approach. Here’s a breakdown of the two options:

  1. window.onscroll = function() {}
  • This is an older approach that assigns a function directly to the onscroll property of the window object.
  • You can only assign one function using this method. If you assign a new function, it will overwrite the previous one.
  • If you need to remove the scroll event listener, you can set window.onscroll = null .
  • This approach has limited compatibility with older versions of Internet Explorer.
  1. window.addEventListener('scroll', function() {}) :
  • This method uses the addEventListener function to attach a scroll event listener to the window object.
  • You can attach multiple functions using this method without overwriting existing ones.
  • If you need to remove the scroll event listener, you can use window.removeEventListener('scroll', function() {}) .
  • This approach has better compatibility across different browsers, including older versions of Internet Explorer.

In general, it’s recommended to use window.addEventListener('scroll', function() {}) because it offers more flexibility and better browser compatibility.

If you have both window.onscroll and window.onclick assignments, the window.onscroll function will be overwritten by the window.onclick assignment. Here’s an example to illustrate this behavior:

window.onscroll = function() {
  console.log("Scroll event handler");
};

window.onclick = function() {
  console.log("Click event handler");
};

In the above code, only the window.onclick function will be executed when a click event occurs. The window.onscroll function will be replaced by the window.onclick assignment.

If you need to handle both scroll and click events separately, it’s recommended to use addEventListener for attaching event listeners to ensure that multiple event handlers can coexist. Here’s an example:

window.addEventListener('scroll', function() {
  console.log("Scroll event handler");
});

window.addEventListener('click', function() {
  console.log("Click event handler");
});

With the addEventListener approach, both event handlers will execute independently without overwriting each other.

1 Like
5

Thanks for this info. If I ever knuckle down and start to do a JS course, I will hopefully understand more of what you’ve written. I grok the basics, but the overall syntax is still very much out of my wheelhouse. I hate that I’m basically a “script kiddie” since I actually own a website development company. It’s kind of embarrassing that I have to rely on other people for my JS needs. :flushed:

W3 Schools is known for not keeping their content current. I just wanted to give the OP an example to get him in the ballpark of how such effects require some CSS and JS code (ie. they’re not built into Bootstrap or BSS.)

6

Thanks! I was able to use this as a starting point. Got the fade working, now I’m just working on the navbar stuff.