发表新帖
发表新帖

Keeping a header always in view

后端 未结
关注
5 2074
栀梦
栀梦 2020-12-16 06:04

I am designing my website and I\'m trying to find a way to keep a header always in the screen.

For an example, take a look at this extra long page on Wikia.com. Noti

相关标签:
5条回答
  • 挽巷
    2020-12-16 06:22

    HTML:

    <div id="wrap">
    <div id="header"> HEADER </div>
    <div id="navigation"> NAVIGATION </div>
    <div id="content"> CONTENT  </div>        
</div>

    JavaScript:

    ( function () {    
    var nav = $( '#navigation' )[0],
        top = $( nav ).offset().top,
        left,
        height = $( nav ).outerHeight(),
        width = $( nav ).width(),
        fixedClass = 'fixed';

    function pageOffset() {
        return window.pageYOffset || document.body.scrollTop;
    }

    $( window ).
            resize( function () {
                left = $( nav ).offset().left;
            }).
            scroll( function () {
                $( nav ).toggleClass( fixedClass, pageOffset() > top );

                if ( $( nav ).hasClass( fixedClass ) ) {
                    $( nav ).
                        css({ 'left': left, 'width': width }).
                        prev().css({ 'marginBottom': height });
                } else {
                    $( nav ).
                        prev().andSelf().removeAttr( 'style' );
                }
            }).
            trigger( 'resize' );    
})();

    Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/

    0 讨论(0)
  • 名媛妹妹
    2020-12-16 06:30 
    //header//

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
        <meta name="Description" content="<?php echo $SITE_NAME;?>" />
        <meta name="robots" content="all, index, follow" />
        <meta name="distribution" content="global" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><?php echo SITE_NAME;?></h1>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="/photosharing/">Home</a></li>
    <!--
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact us</a></li>-->
    </ul>
    </div>
    <div id="content">

//footer


</div>
<div id="footer">
        Copyright &copy; <?php echo SITE_NAME.' , '.date('Y');?>
    </div>
</body>
</html>

//css
body,td,th {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
}
body {
    margin-left: 0px;
    margin-top: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
    margin: 0 30px;
    background: #fff;
}

#header
{
    background: #ccc;
    padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 100%;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content
{
    clear: left;
    padding: 20px;
}

#content h2
{
    color: #000;
    font-size: 160%;
    margin: 0 0 .5em;
}

#footer
{
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}
    0 讨论(0)
  • 既然无缘
    2020-12-16 06:32

    If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:

    .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

    Or just to the of the the page:

    .top-bar {
  margin: 0;
  width: 100%;
}
    0 讨论(0)
  • 臣服心动
    2020-12-16 06:37

    You could use CSS positioning to solve this. The following link has instructions on what you need I believe.

    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    Edit: Sorry I misread, these should work for headers as well.

    http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

    http://davidchambersdesign.com/css-fixed-position-headers/

    Hope these help.

    0 讨论(0)
  • 悲哀的现实
    2020-12-16 06:47

    Always remember if you have to stick the header or footer { position : fixed; } can be used.

    So apply CSS like this:

    .header{
    top:0;
    width:100%;
    height:50px;
    position:fixed;  // this is the key
}
    0 讨论(0)
 看不清?
提交回复
热议问题