向下滚动网站时修复标题

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 ）。 如果您想使用移动浏览器， 可能会造成麻烦。

如标签所示，您知道滚动时需要一些Javascript来缩小标题。

我为您提供了一个有关如何执行此操作的简单示例。

这个想法很简单：当页面滚动时，进行检测，并判断滚动值是否大于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