I want something to happen when you scroll to a certain point, is this possible?
I saw the scroll() function, but im not sure thats what i want?
Example: I have a nav bar at the top and i want to lower the opacity until it goes to a certain point (when the menu and banner dissapears), then the opacity goes back to 100%.
Thanks
Youâll want to run a function upon the window.onscroll event. Your function will be fired repeatedly while scrolling is happening, and it should measure how far down has been scrolled every time, and do its opacity magic.
Visit this link:
Look at the âpropertiesâ section and I think youâll find what you want, especially if you do a search for the word âscrollâ.
i am not sure how to implement that can u give an example?
Thanks
EDIT: i found out that window.screenX and window.screenY could maybe be used with the if function
if (window.screenY>500px)
{
changecss(â#top-barâ,âopacityâ,â0.5â)
}
Does it work?
Youâre on the right track. Now put that if
block in a function, and make it run when window.onscroll fires.
You could even work out a way of lowering the opacity gradually, using the value for window.screenY to work out the opacity (youâll need to come up with a simple mathematical formula).
how do i do that? lol sorry i dont write much javascript code
<script type=âtext/javascriptâ>
function topbar() {
if (window.screenY>500px)
{
changecss(â#top-barâ,âopacityâ,â0.5â);
}
</script>
OK, now you need to add this after what you posted:
window.onscroll = topbar;
That will make the topbar function be called repeatedly while the window is being scrolled.
ok lets see, i changed the code a bit
<script type=âtext/javascriptâ>
function topbar () {
if (window.screenY > 500px)
{
document.getElementById(âtop-barâ).style.opacity = â0.5â;.this.filter = âalpha(opacity=50)â;
}
window.onscroll = topbar;
</script>
and still not working
I didnât spot this the first time. This bit is wrong:
if (window.scrollY > 500px)
For a start, you need scrollY, not screenY. Read the descriptions! Also, scrollY will return a number without the âpxâ. So it should be:
if (window.scrollY > 500)
This will also fail:
.this.filter = "alpha(opacity=50)";
The semi-colon before it means âend of statementâ. Having that start just with a dot is meaningless. You need something like this:
var topbar = document.getElementById('top-bar');
topbar.style.opacity = "0.5";
topbar.style.filter = "alpha(opacity=50)";
very weird, the code looks fine, but it doesnt work =(
<script type="text/javascript">
var topbar = document.getElementById('top-bar');
function topbar() {
if (window.scrollY > 500)
{
topbar.style.opacity = "0.5";
topbar.style.filter = "alpha(opacity=50)";
}
window.onscroll = topbar;
</script>
BTW thanks for all ur work i appreciate it =D
Let me guess. Youâve put that in the <head>. That means âtop-barâ doesnât exist yet (when the browser parses the JS). You need to put that JavaScript at the bottom of the body, just before the closing </body> tag.