Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to use jQuery to capture mouse scrolling

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #151931
    Thadley
    Participant

    Hey people,

    I have an idea in mind but I’m not sure what is the best way to go about doing this. I want to use jQuery to do something when the user starts scrolling.

    When the page loads, the header with the navigation will be visible. As soon as the user starts scrolling down, I want to hide the whole header and show a short navigation and have that remain visible. Only when the user has scrolled completely to the top of the page will I want the short navigation to hide and the header be shown again.

    What is the best way to do this and where could I learn this? This would help tremendously!

    #151958
    nkrisc
    Participant

    Here’s something I whipped together that seems to accomplish what you want. There might be a better way so if there is, hopefully someone else can help with that.

    $(document).scroll(function(){
      if($(document).scrollTop() <= 1){
        $('body').css('background','red'); //what happens when you leave top
      }
      if($(document).scrollTop() === 0){
        $('body').css('background','green'); //what happens when you're back at top
      }
    });
    

    Just know that the event for when you’re back at the top won’t trigger on page load is it only check if you’re at the top while scrolling.

    http://codepen.io/anon/pen/FBkLI

    #151965
    Thadley
    Participant

    @nkrisc I had come up with something similar to this as well. it was something like this.

    My version

    This is very close to what I want it to do the only problem is it looks a little clunky. I’m not sure of how I can smooth the transitions of the header hiding and becoming visible again.

    Any ideas?

    #151966
    nkrisc
    Participant

    Maybe something a little more like this?

    http://codepen.io/anon/pen/LBGup

    I gave the header a fixed position so it’s not scrolling off the screen the same time the hide animation is happening. It looks much smoother.

    #152044
    Thadley
    Participant

    @nkrisc Thanks man. This does make it smoother for sure since it isn’t moving the whole web page during the process. I didn’t even think of that lol.

    I fixed my header a bit so it would work with position:fixed. Your help was appreciated :)

    #152092
    Thadley
    Participant

    The only thing I have to figure out now for this to be completely finished for the moment is:

    1)If I scroll down the page, and refresh, the header and submenu act accordingly.

    If I were to scroll down the page everything is beautiful, but if I refresh, it acts as If the page hasn’t been scrolled so the header appears and then when i scroll it works as it should.

    Hmm, is there any way to know if the bar isn’t at the top even when you refresh to ‘run certain code’?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.