Jump to content

Special dynamic positioning

Recommended Posts

Possible with CSS/JS?? WITHOUT jQuery !!! Hi, I need a technique to have a special position of elements inside of scrolling elements. For instance:

  • many words ordered alphabetically in a scrollable container
  • beside the list appears the actual First Letter at the top level of the first word with this letter
  • ...but max. at top of the scrollable box
  • scrolling by user moves the next First Letter closer to the previous one and pushes it sometime out of the box

WITHOUT jQuery !!! Thanks for your help. My base code: (without the needed functionality)

<!DOCTYPE html><html><head>  <meta charset="utf-8" />  <title>Mover</title>  <style>  body > div { width:200px; height:300px; overflow-y:scroll; border:1px solid red; }  body > div > ul > li > div { float:left; width:50px; height:50px; background:#69c; }  body > div > ul > li > p { margin-left:60px; }  </style></head> <body>  <div>   <ul>	<li>	 <div>A</div>	 <p>Anton</p><p>Anton</p><p>Anton</p><p>Anton</p><p>Anton</p><p>Anton</p>	</li>	<li>	 <div>B</div>	 <p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p>	</li>	<li>	 <div>C</div>	 <p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p>	</li>   </ul>  </div></body></html>

Edited by Terenéus

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...