jquery - scrollTop inside position Fixed -


i facing issue need use scrolltop inside div thats position fixed , overflow-y. did see post using scrolltop inside of fixed element overflow-y:scroll

the issue have is, error element have scroll positioned inside content relative positioned. code not work

my fiddle http://jsfiddle.net/5446a6ds/2/

if remove parent relative positioning, works, cannot that. error may positioned anywhere within content relatively positioned., scrolling content not option.

html

<div id="relativedad">     <div id="containerparent">     <div id="containerchild">         <section id="content">                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>              form<br>                 form<br>             <p class="form-error-msg"> please provide missing information in fields highlighted below.</p>                 form<br>                 form<br>                 form<br>              form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>              form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 form<br>                 <fieldset>                     <input type="date" id="dateofbirth" required="">                     <input type="password">                 </fieldset>                 <button id="button1">button</button>           </section>       </div>     </div>    </div>  javascript $("#button1").on("click", function(){      var position = $(".form-error-msg").position().top +             $("#containerchild").scrolltop(); $("#containerchild").animate({scrolltop: position}); });  css #relativedad {     position: relative;       overflow: hidden; } #containerparent {     position: fixed;     background-color:blue;      height: 100%;     border:1px solid red;     width: 100%; } #containerchild {     position: fixed;     overflow-y: scroll;  height: 100%;  }  #content {     position:relative; } 

you're adding position. having

var position = $(".form-error-msg").position().top; 

is sufficient because .position relative offset parent you're scrolling within #containerchild

here's updated fiddle. i've added paragraph before , changed height 80% demonstrate relative calculation.

http://jsfiddle.net/5446a6ds/3/


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -