向下滚动网站时修复标题

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

我试图在向下滚动网站时将 id="header_bottom" 的 div 固定在顶部。我在 css 中添加了 position:fixed top:30px 但它也覆盖了一些横幅。我希望在不影响网站外观的情况下向下滚动时修复此 div。 Kinldy 指导我如何做到这一点。一个工作小提琴将是我学习的重要来源。谢谢

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

将以下内容添加到 CSS 中的#headerwrapper：

{ position: fixed, top: 0; }

查看此 jsFiddle 以供参考：http://jsfiddle.net/s9z3wmtq