0

i have searched everywhere and so far can't find an answer specific to what i am looking to do.

here is a website that has what i am trying to, essentially, copy: http://theeverygirl.com/feature/emily-henderson-of-secrets-of-a-stylist

do you see the contributors text area on the left? it floats with the blog post, but stops floating when it reaches the end of the blog post/footer area, and also does not appear until one scrolls down far enough on the page to view the blog post.

here is my current html/css that i would like to do this with:

<html>
<head>
<style>
   a:link{
       color: black;
   }
   a:hover{
       color: #83D3E8;
   }
   a:active{
       color: #01B1D1;
   }
p.small {line-height:70%;}
</style>
</head>
<body>
<div style="background:clear;border:1px clear;padding:5px 10px;margin: 5px; position:   fixed; left: 0%; bottom: 12%; max-width: 130px; height: 280px;opacity: 0.6;">
<h1><span style="font-family:andada,serif;">CONTRIBUTORS</span></h1>

<hr />
<p><span style="font-family:andada,serif;">PHOTOGRAPHY BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.braelynjanesmith.blogspot.com" target="_blank">braelyn jane smith</a></span> 
</p>

<p><span style="font-family:andada,serif;">STYLING BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.bluecactusstyling.com" target="_blank">joanna lynne smith</a></span></p>

<p><span style="font-family:andada,serif;">COPY BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.bluecactusstyling.com/about" target="_blank">joanna lynne smith</a></span>       
</p>
</div>
</body>
</html>

and you can view it live, here: http://bluecactusstyling.com/2014/06/05/test-2-2/

any tips? keep in mind that i am NOT a programmer. i've done all of this so far with google searches and html builders.

bluecactusstyling
  • 3
  • 2
  • possible duplicate of [Stop fixed position at footer](http://stackoverflow.com/questions/8653025/stop-fixed-position-at-footer) – CMPS Jun 20 '14 at 23:17

1 Answers1

0

The script it is using to do that is here:

http://theeverygirl.com/sites/all/themes/everygirl/js/layout.js?n549sa

(Starts at the "// Make article left sidebars sticky" bit)

Basically, it works by calculating if you are scrolled further down the screen than the beginning of the article. If you are, it adds "position:fixed" css to the contributors area, which fixes it in a static position on the screen.

RichardB
  • 2,615
  • 1
  • 11
  • 14
  • Written a basic script here that does what you are after here - http://jsfiddle.net/a6A78/1/ - note that this requires the jquery library to work (which your live site has). – RichardB Jun 21 '14 at 00:22
  • however, i am SUCH a noob that i literally have no idea what to do with javascript. where do i enter that on my post? i've figured out enough in the past few weeks that i know CSS styling goes after style in the head, and the HTML surrounds my content that i want stylized. but where do i put the javascript? – bluecactusstyling Jun 30 '14 at 07:21
  • The javascript goes between – RichardB Jun 30 '14 at 10:10