固定標題，同時向下滾動網頁

Question

我正在設計一個網站，我試圖讓一個固定的標題和標題縮小一點，而有人向下滾動網站。

HTML：

<div id="headerwrapper"> 
<div id="header"> 
Call Us today 0000-123456 | info@mysite.com 
</div> 
<div id="header_bottom"> 
<div id="header_content"> 
<div id="logo"> 
<img src="images/logo.png" width="115px" height="90px" alt="left"/> 
</div> 
<div class="menu"> 
<ul> 
<li><a href="#">Home</a> 
<li><a href="#">About Us</a> 
<li><a href="#">Our Services</a> 
<li><a href="#">Our Work</a> 
<li><a href="#">Contact Us</a> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div id="banner"> 
<img src="images/banner.jpg"/> 
</div> 
<div class="content"> 

<div id="website"> 
<div id="website_left_content"> 
<img src="images/website.jpg" /> 
</div> 
<div id="website_right_content"> 
<h1>Custom Website Design</h1> 
<p style="line-height:17px;">Content goes here 
<br/><br/> 
We only use the latest and updated code to build your website and all the websites we build are mobile responsive, so your website will work across all mobile and tablet devices. 
</p> 
</div> 
</div> 

<div id="logo_content"> 
<div id="logo_left_content"> 
<h1>Logo Design</h1> 
<p style="line-height:17px;">New business starting off to well established businesses, we can help enhance your businesses brand. Our services include logo design, business stationery, brochures, flyers, reports, newsletters and all your graphical needs. 
<br/><br/> 
A logo is important for any business as it represents who you are and acts as your business branding, this is why it is vital to have a professional logo design so that it can leave a lasting impression on your customers 
</p> 
</div> 
<div id="logo_right_content"> 
<img src="images/logo.jpg" /> 
</div> 
</div> 

CSS：

body{ 
    font-family:arial; 
    font-size:13px; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#seperator_top{ 
    width:100%; 
    height:5px; 
    background-color:#7CBB00; 
} 
#headerwrapper{ 
    width:100%; 
    background-color:#000; 
    height:auto; 
} 
#header{ 
    width:950px; 
    height:auto; 
    margin:0 auto; 
    overflow:auto; 
    background-color:#000; 
    color:#FFF; 
    padding:15px; 
} 
#header_bottom{ 
    width:100%; 
    height:auto; 
    background-color:#000; 
    border-top:1px solid white; 
} 
#header_content{ 
    width:950px; 
    height:auto; 
    margin:0 auto; 
    overflow:auto; 
} 
#logo{ 
    width:200px; 
    float:left; 
} 
.menu{ 
    float:right; 
    width:550px; 
    margin-left:100px; 
    margin-top:20px; 


} 
.menu ul{ 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

.menu ul li a{ 
    float:left; 
    color:#FFF; 
    padding:10px 10px 10px 10px; 
    margin:5px; 
    text-decoration:none; 

} 
.menu ul li a:hover{ 
    background-color:#7CBB00; 
    border-radius:5px; 
} 
.content{ 
    width:950px; 
    height:auto; 
    margin:0 auto; 
} 
#website{ 
    margin-top:30px; 
    width:100%; 
    height:auto; 
    overflow:auto; 
} 
#website_left_content{ 
    width:500px; 
    height:auto; 
    float:left; 
} 

#website_right_content{ 
    width:400px; 
    height:auto; 
    float:right; 

} 


#logo_content{ 
    margin-top:30px; 
    width:100%; 
    height:auto; 
    overflow:auto; 
} 
#logo_right_content{ 
    width:500px; 
    height:auto; 
    float:right; 
} 

#logo_left_content{ 
    width:400px; 
    height:auto; 
     float:left; 
} 

我想有DIV ID爲= 「header_bottom」 向下滾動網頁時要固定在上面。我添加了位置：固定頂部：30px的CSS，但它也涵蓋了一些橫幅。我希望這個div在滾動下來的同時不會影響網站的外觀。金爾迪指導我如何做到這一點。一個工作小提琴將是我學習的重要來源。由於

Answer 1

簡單的解決方法：

爲了使標題欄 「粘」，你可以使用一些非常簡單的CSS（position:fixed）。 This might create headaches if you want to involve mobile browsers.

當你的標籤顯示時，你會發現當你滾動時你需要一些Javascript來縮小標題。

I've made you a simple example of how you can do this.

的想法很簡單：當頁面滾動，進行檢測並判斷如果滾動值大於0。如果是這樣，一個類添加到你的頭上;如果不是，則刪除同一班級。

使用transition您可以在標題上創建一個平滑的效果，使其看起來縮小（或您希望實現的任何其他效果）。

注意：您確實需要檢查頁面一載入就滾動了多少。這是因爲當您滾動後刷新頁面時，瀏覽器會將您彈出到您離開的位置。

下面的代碼：

JS：

$(function() { 

    // Run the function as the page loads, in case the user refreshes after scrolling 
    adjustHeader(); 

    // Add event listener for scrolling 
    $(document).on('scroll', adjustHeader); 

    // Reusable function 
    function adjustHeader() { 
     // Check if document has scrolled at all 
     if ($(document).scrollTop() > 0) 
      $('#headerwrapper').addClass('scrolled'); 
     else 
      $('#headerwrapper').removeClass('scrolled'); 
    } 
}); 

CSS：

#headerwrapper { 
    width:100%; 
    background-color:#000; 
    height:auto; 

    /* Keep the bar at the top of the page */ 
    position: fixed; 
    top: 0; 

    /* This is to create the animation: */ 
    transition: top 350ms; 
} 

/* Here is our "scrolled" class" */ 
#headerwrapper.scrolled { 
    /* For simplicity's sake: */ 
    top : -25px; 
} 

Answer 2

以下內容添加到您的#headerwrapper在CSS：

{ position: fixed, top: 0; } 

檢查這個的jsfiddle供參考：http://jsfiddle.net/s9z3wmtq