Navbar fixed on the top of HTML page (CSS / HTML)

前端 未结 5 1448
心在旅途
心在旅途 2020-12-18 13:37

I\'m trying to learn some of CSS3 and HTML5 but I\'m a little confused with somethings. For now, I want create a page with a fixed navbar on the top of page, that scrolls wi

相关标签:
5条回答
  • 2020-12-18 13:54

    What you need to use is position: fixed;

    /* Tell body leave a 40px gap at the top for the navigation when the page is scrolled to the top */
    body { position: relative; padding-top: 40px; }
    /* Tell the nav to stick to the top left */
    nav { position: fixed; top: 0; left: 0; }
    

    http://jsfiddle.net/ninty9notout/8J7UM/

    0 讨论(0)
  • 2020-12-18 13:57

    Give margin to your content. The margin value should be the height of you header (sticky header) + 20px.

    0 讨论(0)
  • 2020-12-18 14:01

    wrap you content with a div and give it padding top 100px(height of header)

    as per my structure

    .bodyPan{
        padding-top:100px;
    }
    

    working jsFiddle file

    0 讨论(0)
  • 2020-12-18 14:16

    Add margin-top to your content. The header is fixed - so it is not included within the flow of the document.

    Also notice that you have opacity defined on your header - which causes you to slightly see the content when scrolling.

    If this is not what you wanted - then remove it. (like so)

    FIDDLE

    #content{
        margin-top: 100px;
        z-index: 0;
        position: absolute;
    }
    
    0 讨论(0)
  • 2020-12-18 14:17

    Elements with "fixed" or "absolute" position don't occupy space in the page, so a possible workaround for you is to add a margin or padding to your content:

    <article id='content'>
        <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>        <br/><br/><br/><br/><br/><br/><br/>
        <p>again</p>
    <article>
    
    
    #content{
        margin-top: 100px;
    }
    

    http://jsfiddle.net/KUpnA/

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题