Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need page header visible all the time with persistent sticky header

    Hi There,

    I would like to a ability to fix the fixed header on top of my other contents. The below url you can see when i scroll fixed header text also scrolling but i want to fix the 'fixed header' text. Thanks for your help.

    Sticky Header Bar - JSFiddle

    Thanks

  2. #2
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    206
    Thanks
    4
    Thanked 39 Times in 39 Posts
    in the css you forgot to
    put a . in front of
    myFixedHeader

  3. #3
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help, I've updated Sticky Header Bar - JSFiddle and it fixed the position but it overlaps now. Any idea?

  4. #4
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    206
    Thanks
    4
    Thanked 39 Times in 39 Posts
    Code:
    <style>
    h1{
        padding:0;
        margin:0;
    }
    header {
     position: fixed;
    	top: 0;
    	z-index: 9999;
    	width: 100%;
    	margin-top: 0px;
    	background: white;
    }
    article, section, footer{
        background: pink;
        
        margin-bottom: 20px;
        height: 500px;
        margin-top: 100px;
        float: left;
        width: 100%;
    }
    section{
        background: orange;}
    footer{
        background: red;}
    </style>
    <header id=hdr>
      <h1>Fixed Header</h1>
    </header>
    <section id=sctn >
        <h1 id=sctn_h1>Hey 1</h1>
       <!-- stuff and stuff -->
    </section>
    <article id=artcl>
        <h1 id=artcl_h1>Hey</h1>
       <!-- stuff and stuff -->
    </article>
    <footer>You Made It!</footer>
    <script>
    window.onscroll=(function(){
    var a,c,d,e;
    var b=hdr.getBoundingClientRect();
    return function(){
    	a=sctn_h1.getBoundingClientRect();
    	c=artcl_h1.getBoundingClientRect();
    	d=sctn.getBoundingClientRect();
    	e=artcl.getBoundingClientRect();
    s=sctn_h1.style;
    if(a.top<b.bottom){s.position='fixed';s.top=b.bottom+'px';}
    if(d.top>a.top)s.position='';
    s=artcl_h1.style;
    if(c.top<a.bottom){s.position='fixed';s.top=a.bottom+'px'}
    if(e.top>c.top) s.position='';
    }})();
    </script>
    Last edited by Shaka Zorba; 01-07-2017 at 05:04 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •