简单修复：

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 =＆＃34; header_bottom＆＃34;在向下滚动网站时固定在顶部。我添加了位置：固定顶部：30px到css但它也涵盖了一些横幅。我希望这个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

在向下滚动网站时修复了标题

2 个答案:

简单修复：