使用滚动事件和添加类的动画标题

时间：2017-02-06 18:37:53

标签： javascript jquery html css

我正在尝试设置标题的动画，以便在用户滚动时更改高度和字体大小。滚动时，我正在使用一个函数向标题添加一个类>一定数量，但测试时标题保持不变。我将在下面包含我的html，css和JS。

HTML：

<!DOCTYPE html>
<html lang="en-GB">

<head>
    <title>Alison Hurman</title>
    <meta charset="utf-8">
    <!-- ENTER KEYWORDS <meta name="keywords" content=""> -->
    <!-- ENTER DESCRIPTION <meta name="description" content=""> -->
    <!-- ENTER FINAL URL <meta name="canonical" content="http://www." property="canonical"> -->

    <link href='https://fonts.googleapis.com/css?family=Open+Sans|Oswald:300,400|Sansita|Noto+Sans|Kalam' rel='stylesheet' type='text/css'> <!--Google fonts-->
    <link rel="stylesheet" href="css/styles.css"> <!-- Link to main style sheet -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- JQuery CDN -->
    <script src="javascript/animated-header.js"></script> <!-- JS for animated Header -->

</head>

<body id="pptpp">
    <header>
        <nav>
            <ul>
            <li class="leftnav"><a href="#AboutMe">ABOUT ME</a></li>
            <li class="leftnav"><a href="shop.html">SHOP</a></li>
            <li class="leftnav"><a href="Attend.html">ATTEND</a></li>
            <li class="rightnav"><a href="Blog.html">BLOG</a></li>
            <li class="rightnav"><a href="Freebies.html">FREEBIES</a></li>
            <li class="rightnav"><a href="Social.html">SOCIAL MEDIA</a></li>    
            </ul>
        </nav>
    </header>

    <div id="Page">

        <div id="OptInContent">
            <div id="OptInPlaceholder">
                <p style="margin: 0px; padding: 0px; text-align: center;">OPT IN PLACEHOLDER</p>
            </div>   
        </div>

        <div id="MainContent">
            <div id="AboutMe">
            <a id="AboutMe"><h2>ABOUT ME</h2></a>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
            </div>

            <div id="Help">
                <h2>HOW I CAN HELP</h2>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
            </div>
        </div> <!-- Main Content -->
    </div> <!-- Page -->
</body>

CSS：

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f3f3;
    color: #666;
    margin: 0px;
    padding: 0px;
}

#Page {
    padding-top: 100px;
}

/*
.wrapper {
    max-width: 1080px;
    margin: 0 auto;
}
*/

header {
    background-color: #E9DCCD;
    font-family: 'Oswald';
    font-size: 160%;
    height: 100px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #339933;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.8s ease;
}

/*
header h1 {
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    line-height: 50px;
    padding-top: 10px;
    margin-bottom: -25px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

*/

.scroll {
    height: 50px; 
    font-size: 80%;
}

/*header.shrink h1 {
    text-align: center;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
*/

#center-column {
    background-color: white;
    width: 1080px;
    height: 100%;
    box-shadow: 0px 1px 5px #888888;
    margin: 0 auto;
    padding-bottom: 10px;
}

nav li {
    display: inline;
}

nav li a {
    color: #339933;
    text-decoration: none;
}

nav li a:hover {
    color: black;
}

nav li.leftnav {
    float: left;
    margin-left: -10px;
}

nav li.leftnav a {
    padding-right: 40px;
}

nav li.rightnav {
    float: right;
    padding-right: 30px;
}

#OptInContent {
    width: 100%;
    height: 700px;
    background-color: #fff;
    display: flex;
    align-items: center;
}

#OptInPlaceholder {
    width: 1080px;
    height: 600px;
    background-color: black;
    border-radius: 25px;
    color: #fff;
    margin: 0 auto;
}

#MainContent {
    width: 100%;
}

#AboutMe {
    background-color: #fff;
    margin-top: -20px;
    padding-bottom: 20px;
}

#AboutMe h2 {
    font-family: Oswald;
    font-weight: 300;
    text-align: center;
    color: #339933;
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-color: #339933;
    border-radius: 10px;
    margin-right: 45%;
    margin-left: 45%;
}

#AboutMe p {
    padding-left: 30px;
}

#Help {
    background-color: #fff;
    margin-top: -20px;
    padding-bottom: 20px;
}

#Help h2 {
    font-family: Oswald;
    font-weight: 300;
    text-align: center;
    color: #339933;
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-color: #339933;
    border-radius: 10px;
    margin-right: 45%;
    margin-left: 45%;
}

#Help p {
    padding-left: 30px;
}

JS：

/*jslint browser: true*/ 
/*global $, jQuery, alert*/

$(document).ready(function(){ 
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) {  
            $('#header').addClass("scroll");
        } else {
            $('#header').removeClass("scroll");
        }
    });
});

现在，当我滚动并且没有动画发生时，标题保持完全相同。我不确定是什么导致它不能触发。非常感谢帮助，谢谢。

3 个答案:

答案 0 :(得分：0)

您正在添加课程.scroll而非scroll，这意味着选择器将为..scroll。

将addClass(".scroll")更改为addClass("scroll")，将removeClass(".scroll")更改为removeClass("scroll")，然后就可以了。

试试下面的代码段。

＆＃13;
＆＃13; 
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("scroll");
    }
    else {
        $('header').removeClass("scroll");
    }
});
＆＃13; 
header {
    background-color: #E9DCCD;
    font-family: 'Oswald';
    font-size: 160%;
    height: 100px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #339933;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.8s ease;
}

.scroll {
    height: 50px;
    font-size: 80%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
     <ul>
      <li class="leftnav"><a href="#AboutMe">ABOUT ME</a></li>
      <li class="leftnav"><a href="shop.html">SHOP</a></li>
      <li class="leftnav"><a href="Attend.html">ATTEND</a></li>
      <li class="rightnav"><a href="Blog.html">BLOG</a></li>
      <li class="rightnav"><a href="Freebies.html">FREEBIES</a></li>
      <li class="rightnav"><a href="Social.html">SOCIAL MEDIA</a></li>    
    </ul>
  </nav>
</header>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac nisl sit amet libero gravida dictum vel id eros. Maecenas egestas nulla tincidunt, iaculis nisl vel, dignissim dolor. Phasellus pretium sed nisl at facilisis. Maecenas sed augue sem. Morbi facilisis, lacus eget efficitur tempus, est dolor lacinia urna, ultricies dignissim sem nisi quis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eros nisl, auctor sed tellus at, pulvinar pharetra nibh. Morbi maximus, lorem vitae malesuada semper, nulla velit volutpat orci, non accumsan eros libero id arcu.

  Fusce eleifend lobortis tortor, at cursus libero cursus sit amet. Curabitur luctus neque non leo commodo placerat. Donec at condimentum tellus. Nam id lectus at ex ornare bibendum eget eu sapien. In tincidunt vestibulum lacus eget mattis. Suspendisse massa neque, malesuada a cursus quis, semper luctus lectus. Etiam non aliquam dui, ac pharetra purus. Cras quis massa ac orci facilisis porta a ut dolor.

  Sed tristique lorem ultrices nulla congue lacinia. Proin sed arcu pretium, vestibulum ligula sed, venenatis diam. Aliquam suscipit vel enim id malesuada. Sed vel efficitur nibh, ut fermentum erat. Nunc commodo auctor sapien, et fringilla leo imperdiet sit amet. In vel lorem dui. Pellentesque congue erat ante, a venenatis dui tincidunt a. Pellentesque eget leo urna. Integer iaculis semper magna. Nam vitae condimentum nisi. Etiam libero elit, scelerisque nec interdum eget, varius eu lectus.
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

请使用此代码

$(window).scroll(function() {
   if ($(this).scrollTop() > 1){  
      $('header').addClass('scroll');
   } else {
      $('header').removeClass('scroll');
   }
});

答案 2 :(得分：0)

试试这个

$(document).ready(function(){
$(window).scroll(function() {
   if ($(this).scrollTop() > 1){  
      $('header').addClass('scroll');
   } else {
      $('header').removeClass('scroll');
   }
}); 
});
相关问题
最新问题