javascript - 向下滚动网站时固定标题

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 指导我如何做到这一点。工作 fiddle 将是我学习的重要资源。谢谢

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