Had some trouble wording my question above blush. Anywho...
Tried searching for this, nothing seems to address my issue. So...
I've seen this new "thing" lately (couple websites) where they have a fixed position div (social media) that gets revealed (appears...as if by magic only I know it's just javascript or jquery or whathaveyou!) when you scroll past a certain point on the page.
Here's an example of what I want >>> http://digital-photography-school.com/how-to-photograph-strangers-the-100-strangers-project
When you scroll down the page, the social media bar to the left of the page gets revealed, or appears.
I'm self-taught, so I do know HTML and CSS (enough). However, when it comes to javascript / jquery, I can get lost FAST!
So, please, I beg you, when (and if) answering ... if you're going to give me javascript / jquery besides HTML and CSS, please please please tell me exactly where to put the java / jquery in relation to the HTML.
My platform: blogspot (and yes, I know how to host javascript directly on blogger, so I don't need external files / links). Just tell me where to add it, ex: in the head section or right below/above the HTML itself... you know what I mean hopeful!
I've got the social media div fixed on my page now -- I just need to be able to make it appear past a certain point when scrolling.
If it helps you, use the same positions, sizes, etc. as in the website example above. I'll do whatever I have to to apply the styling to my own site.
I cannot post link to my actual site because it's not ready to go live yet.
Many thanks in advance. :-)
!!!!!!!!!!UPDATE!!!!!!!!!!
OK, it took some doing, but I managed to find what I was looking for right here on this site! I had to adapt it to my situation, but it worked like a charm and only took a few mins to implement.
This is the javascript I used just below the div within the HTML:
$(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 500) {
$('#social-media').slideDown(0);
}else if($(document).scrollTop() < 500){
$('#social-media').fadeOut(0);
}
});
})
And this is the CSS:
#social-media {
background: white;
width: 150px;
height: auto;
position: fixed;
z-index:1000;
top: 20px;
display: none;
}
Did the trick! And I answered my own q, too! In case anyone was having the same problem.
Thanks for everything -- I come here again and again -- really helped me a lot over the years!
