3

I've gone through some of the tutorials here but still can't get a fix for my problem thus my posting this.

I was wondering if you could show me how to get my floating sharebar @ http://www.patchworkoftips.com/blackberry-messenger-voip-voice-calls/1983/ to only show only when the user has scrolled down like 100px of the page or gotten halfway in the article.

Here's my my sharebar css:

#search_bar {
    z-index: 1000;
    position: fixed !important;
    top: 0;
    width: 1082px;
    color: #FFF;
    background: #333;
    padding-top: 1px;
    padding-bottom: 1px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

Sorry I couldn't paste the sharebar code as it keeps disappearing here.

I'm a total newbie to using javascript and jquery so copy and paste solutions would be immensely appreciated.

Chris Martin
  • 30,334
  • 10
  • 78
  • 137
UdegbunamChuks
  • 45
  • 6

1 Answers1

1
$(window).on('scroll', function(){
    if($(window).scrollTop() > 100){ // The '100' can be set to what ever pixel height you want
         $('#search_bar').fadeIn('500'); // This shows the share bar
    }else{
         $('#search_bar').fadeOut('500'); // This hides the share bar
    }
});
VIDesignz
  • 4,703
  • 3
  • 25
  • 37
  • @Madara: Thanks. Here's the link to the sharebar code: https://gist.github.com/4085257 – UdegbunamChuks Nov 16 '12 at 07:55
  • Thanks for the code but how do i add this to the page? Do I add it to functions.php or what? The sharebar code is in my footer.php. – UdegbunamChuks Nov 16 '12 at 07:57
  • By the way I tried adding the code to my function.php but kept getting a syntax error – UdegbunamChuks Nov 16 '12 at 10:20
  • I just discovered it had to go in the header.php and it seems to be working but not 100%. when the page loads for the first time, the sharebar is visible but when i then scroll down it disappears and reappears later. After that when I scroll back to the top, it doesn't show again until I scroll down like 100px. I'm guessing this is a CSS issue right? – UdegbunamChuks Nov 16 '12 at 12:09
  • @UdegbunamChuks Yes, make sure the initial state of the share bar had display: none; :) – VIDesignz Nov 16 '12 at 12:56
  • @UdegbunamChuks Your welcome man! Don't forget the accept my answer by clicking the checkmark to the upper left :) – VIDesignz Nov 16 '12 at 14:54
  • Thanks. I wasn't aware I had to do that. ;) – UdegbunamChuks Nov 16 '12 at 15:09