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?
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.
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.
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:
window.onscroll = function() {}
- This is an older approach that assigns a function directly to the
onscroll
property of thewindow
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.
-
window.addEventListener('scroll', function() {})
:
- This method uses the
addEventListener
function to attach a scroll event listener to thewindow
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.
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.
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.)
Thanks! I was able to use this as a starting point. Got the fade working, now I’m just working on the navbar stuff.
@martin can we add these to Bootstrap Studio please