Giữ tiêu đề luôn ở chế độ xem

Tôi đang thiết kế trang web của mình và tôi đang cố tìm cách giữ tiêu đề luôn trong màn hình.Giữ tiêu đề luôn ở chế độ xem

Ví dụ, hãy xem this trang bổ sung trên Wikia.com. Lưu ý rằng khi bạn cuộn trang, thanh công cụ nhỏ ở dưới cùng vẫn ở một nơi. Tuy nhiên, di chuyển xuống cuối trang và bạn sẽ nhận ra rằng thanh công cụ vẫn ở vị trí cố định cho đến khi nó bị mất tầm nhìn.

Đây là những gì tôi muốn làm, nhưng ngược lại. Có một tiêu đề ở một vị trí cố định trên trang web, nhưng khi nó không có trong xem có nó ở đầu trang.

Tôi đã thử xem một ví dụ trên DynamicDrive.com (tìm kiếm Kịch bản nội dung của Dock, vì tôi không thể đăng liên kết khác), nhưng tôi thấy rằng nó quá háo hức đối với tôi.

Ai đó có thể giúp tôi làm việc này không?

Xin cảm ơn trước.
~ DragonXDoom

P.S. Bây giờ tôi nhận thấy, hộp Cách định dạng ở bên phải của trang câu hỏi gửi có hiệu ứng này.

Nguồn

2010-12-30 DragonXDoom

câu trả lời của tôi (được chấp nhận bởi OP) đã bị xóa do đến một liên kết chết. Tôi đã cập nhật câu trả lời của tôi với mã và một bản demo làm việc trên jsfiddle. Tôi sẽ cố gắng để có được câu trả lời của tôi un-deleted (tôi không thể làm điều đó bản thân mình) ... –

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/

Nguồn

2010-12-30 02:55:17

Cảm ơn rất nhiều! Đây chính xác là những gì tôi đã làm sau! – DragonXDoom

Bạn có thể sử dụng định vị CSS để giải quyết vấn đề này. Liên kết sau đây có hướng dẫn về những gì bạn cần tôi tin.

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

Edit: Xin lỗi tôi không nhận định, những nên làm việc cho tiêu đề là tốt.

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

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

Hy vọng những sự giúp đỡ.

Nguồn

2010-12-30 02:19:16

+1 cho vị trí cố định – JustcallmeDrago

Tôi rất tiếc, tôi nên rõ ràng hơn một chút. Tiêu đề mà tôi đang cố gắng tác động không phải là phần tử trên cùng trên trang của tôi. Nếu tôi sử dụng vị trí: cố định thì tiêu đề chỉ nổi ở giữa trang. Tôi muốn thử và làm cho nó hoạt động như một yếu tố bình thường cho đến khi người dùng cuộn xuống để nó không thể xem được. Sau đó, tôi muốn nó hoạt động giống như trên các tiêu đề bạn tham chiếu trong bài đăng của mình. Cảm ơn, nhưng nó không giúp tôi. – DragonXDoom

Cố gắng hiểu - vì vậy phần tử nằm ở giữa trang ở đâu đó, sau đó người dùng bắt đầu cuộn, phần tử đáp ứng đầu trang và sau đó 'dính' ở đó để trở thành mục tiêu, đúng không? Tôi có thể xem xét một giải pháp jQuery. Sẽ cần phải có một sự kiện khi một phần tử chạm vào phần trên cùng của chế độ xem có thể nhìn thấy, không chắc liệu có một sự kiện không? –

Luôn nhớ nếu bạn phải gắn đầu trang hoặc chân trang { position : fixed; } có thể được sử dụng.

Vì vậy, áp dụng CSS như thế này:

.header{ 
    top:0; 
    width:100%; 
    height:50px; 
    position:fixed; // this is the key 
}

Nguồn

2010-12-30 02:45:19 Wazzzy

Nếu bạn muốn nó bị kẹt ở đầu ngay cả khi người dùng cuộn (tức là bị mắc kẹt để phía trên cùng của cửa sổ trình duyệt), sử dụng:

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

Hoặc chỉ cần đến các trang:

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

Nguồn

2011-10-16 08:57:54 bricker

//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%; 
}

Nguồn

2013-01-07 06:34:16 user1953692

Giữ tiêu đề luôn ở chế độ xem

Trả lời

Các vấn đề liên quan