0

I have a question regarding my website.

I have a parallax effect going on with my website but I want the text "Clinical trials" and all the text below it to stay fixed when I scroll over it, right now it just scrolls with the page how can I fix that?

Ralf de Kleine
  • 11,464
  • 5
  • 45
  • 87
K.Cordilia
  • 21
  • 2
  • 3
    Welcome to Stackoverflow. Share the code you have tried yet in order to get help efficiently. – Nagama Inamdar Aug 31 '15 at 07:40
  • I don't understand.. This text is part of the content of the page. Do you want that it will stick in this position and cover the entire content? – Mosh Feu Aug 31 '15 at 07:40
  • well..even your site is not responsive.. owl-wrapper class is getting too much width..check that also. – Leo the lion Aug 31 '15 at 07:42
  • main navigation fix to top when you scroll right? – Lalji Tadhani Aug 31 '15 at 07:45
  • Im still working on the responsiveness, but first when you scroll down i want the text clinical trials the image our care out expertise to stay fixed – K.Cordilia Aug 31 '15 at 07:48
  • @MoshFeu No i want the text to stop scrolling when it comes to the position where i want it. – K.Cordilia Aug 31 '15 at 07:49
  • That is possible by using JQuery PIN. You can set the position of text while scrolling and stop/start it where you want. follow the url :http://webpop.github.io/jquery.pin/ and http://www.webpop.com/blog/2013/03/25/jquery-pin – CodeRomeos Aug 31 '15 at 07:52
  • @CodeRomeos Im trying to use the jquery.pin but cant figure it out for the life of me.. Its like its not activating the pin or something – K.Cordilia Aug 31 '15 at 08:18
  • @CodeRomeos I figured out how to pin items, but its not pinning like i want it too, it just makes everything flash and misposition everything.. Sorry for my noob stuff – K.Cordilia Aug 31 '15 at 08:49

1 Answers1

0

I believe this is the correct way to respond instead of adding another answer. I have had similar issues with javascript working perfectly in one browser but not another. I remember Firefox causing the 'flashing' effect. So my question to you is, have you tested it on multiple browsers?

Sorry for the original response not being anything close to what you were trying to do. I read the original post and quickly scanned the tags assigned to it. By the time you had edited the original I had already answered. I am leaving the original markup incase it helps somebody else with a html/css implementation. The html/css keeps a div visible throughout the entire page. It doesn't provide the effect of keeping it visible once the user scrolls to it's location on the page.

ORIGINAL

The text you want fixed while scrolling should be in it's own div and assigned a class in the style sheet. Use top and right to position it.

HTML:

<div class="trials-fixed">Clinical trials</div>

CSS:

.trials-fixed{
      position: fixed;
      top: 0;
      right: 0;
      width: 300px;
}

The position property is explained more here.

You may have to set the z-index of the text; explained here.

GFreeman
  • 1
  • 2