SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Jquery Scroll Event

    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

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:

    https://developer.mozilla.org/En/DOM/Window

    Look at the "properties" section and I think you'll find what you want, especially if you do a search for the word "scroll".

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do i do that? lol sorry i dont write much javascript code

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <script type="text/javascript">
    function topbar() {
    if (window.screenY>500px)
    {
    changecss('#top-bar','opacity','0.5');
    }
    </script>

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    OK, now you need to add this after what you posted:
    Code:
    window.onscroll = topbar;
    That will make the topbar function be called repeatedly while the window is being scrolled.

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I didn't spot this the first time. This bit is wrong:

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

    Code:
    if (window.scrollY > 500)
    This will also fail:
    Code:
    .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:

    Code:
    var topbar = document.getElementById('top-bar');
    topbar.style.opacity = "0.5";
    topbar.style.filter =  "alpha(opacity=50)";

  10. #10
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very weird, the code looks fine, but it doesnt work =(

    Code:
    <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. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no... its in the body


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •