Revealing A Div Fixed to Page Top After Scrolling 95 Pixels

Question

I have a fixed position div which is controlled as such.

#backtoallprojects {
  float: none;
  position: fixed;
  top: 0px;
  right: 0px; 
  z-index:9999;
  background-color: rgba(0,0,0,0.5);
}

However, I only want it to reveal/appear after the page has been scrolled 95 pixels down.

This is because the main nav bar is 95px in height, and it is overlapping with other buttons, so should only reveal once the main nav has been scrolled out of the page.

Any help would be appreciated

Thanks

PS I have tried both these, but to no avail:

Show div after scrolling 100px from the top of the page

Show div on scrollDown after 800px

What isn't working about it? http://jsfiddle.net/fmvqp2z8/1/ — brokethebuildagain, Oct 29 '14 at 17:23

ray9209 · Accepted Answer · 2014-10-29T17:18:12.353

1

This worked for me:

$('#backtoallprojects').hide();
$(document).scroll(function() {
    if ($(document).scrollTop() >= 95) {
     $('#backtoallprojects').show();   
    }
    else {
        $('#backtoallprojects').hide();
    }
});

fiddle: http://jsfiddle.net/ray9209/kayweuyp/1/

edited Oct 29 '14 at 17:18

answered Oct 29 '14 at 17:13

ray9209

388
3
14

score 0 · Answer 2 · answered Oct 30 '14 at 08:48

0

thanks for your answers. The jQuery script did work, it turns out I had to change the way it was being added to my Wordpress theme.

I needed to use "noconflict mode", so instead of $ use jQuery for the function names.

answered Oct 30 '14 at 08:48

Christopher McCool

51
4

You could wrap your code inside something like `(function($){ ..your code..})(jQuery)` to keep using $ – René Oct 30 '14 at 08:52

Revealing A Div Fixed to Page Top After Scrolling 95 Pixels

2 Answers2