CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Christopher McCool
Christopher McCool

Reputation: 51

Revealing A Div Fixed to Page Top After Scrolling 95 Pixels

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

Upvotes: 1

Views: 729

Answers (2)

Christopher McCool
Christopher McCool

Reputation: 51

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.

Upvotes: 0

ray9209
ray9209

Reputation: 388

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/

Upvotes: 1

Related Questions