Jquery Scroll Event

JavaScript
1

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 :slight_smile:

2

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”. :slight_smile:

3

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?

4

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).

5

how do i do that? lol sorry i dont write much javascript code

6

<script type=“text/javascript”>
function topbar() {
if (window.screenY>500px)
{
changecss(‘#top-bar’,‘opacity’,‘0.5’);
}
</script>

7

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.

8

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

9

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)";
10

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

11

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.

12

no… its in the body