在jquery中向下滚动时缩小标题

时间：2017-02-28 06:21:22

标签： jquery html css header shrink

关于如何在页面向下滚动时将标题动画缩小为止，有很多问题。虽然我对类似问题的许多回答都有一个基本的想法，但我相信我的情况相当复杂。我的标题在静态或固定时占用太多空间。完整标题包含带有社交媒体链接的前标题，小地址和登录按钮，标题标题：它具有徽标图像以及业务和座右铭的名称，最后是导航菜单。所有这些都包含在div中，并带有以下子div。我使用bootstrap作为菜单导航的模板。基本上我要做的是当向下滚动时我希望前标题和徽标图像消失，只保留标题名称，座右铭和导航菜单。这是以下代码。

Css代码也包含在代码段中，抱歉，如果它太长而且令人困惑。它包含同一项目的其他页面的样式。任何建议，将不胜感激。 

html{
	background-color: #fff;
}

body{
	margin: 0;
	padding: 0;
	background-color: #f6f6f6 !important;
	
}

.container{
	max-width: 985px;
	margin: 0 auto;
}

#LogoSchool{
	display: inline-block;
	width: 75%;
	height: auto;
}

/*Header section*/

#preheader .preheader1 a.spanish{
	display: inline;
	color: #0b5fb1;
	font-weight: bolder;
	position: relative;
	left: 350px;
	bottom: 7px;
}

#preheader .preheader1 .login{
	float: right;
	margin-right: 125px;
	margin-top: -15px;
}

#preheader .preheader1 .login .btn.btn-primary{
	background-color: #fff;
} /*it doesnt change background color for btn*/


#preheader .preheader-hidden{
	display: none;
}

.socialmedia{
	float: left;
	margin: 3px auto;
}

.top-address{
	display: inline-block;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 85%;
	text-align: center;
	margin: 0 auto;
	padding: 0 175px;
}

#topaddress{
	margin: 0 -300px;
}

.headermenu{
	background-color: #fff;
	padding-bottom: 1px;
	border: 2px solid #0000001A;
}


.navbar-fixed-top{
	z-index: 9999;
}

#title-header{
	margin: auto;
	box-sizing: border-box;
}


#title-header h1.title{
	display: inline;
	right: 220px;
	padding: 5px;
	 /*eliminated position relative, bottom and left*/
	font-family: 'Francois One', sans-serif;
	font-size: 23px;
	font-weight: bold;
	letter-spacing: 2px;
}

#motto{

	display: inline-block;
	font-family: 'Damion', cursive;
	font-size: 15px;
	letter-spacing: 2px;
	/*eliminated position relative and bottom*/
	color: #000000b3;

}

.col-md-8{
	margin-top: 25px;
}



@media screen and (max-width: 991px){

	#preheader{
		display: none;
	}

	#motto{
		display: none;
	}

	.name-motto{
		display: inline-block;
		margin-left: 50%;
		}

	.navmenu .nav li{
		margin-right: 0;

	}
}

@media screen and (max-width: 766px){

	.col-xs-12{
		margin: 15px auto;
	}

	

}

.


/*Slideshow Pictures*/


/*Navigation Menu Style  */

.navmenu{
  margin: 0 auto;
}



.navmenu ul{
	float: left;

}

.navmenu li{
	display: inline-block;
	list-style: none;
	margin-right: 7px;
}


@media screen and (max-width: 990px){
  .navmenu li{
    display: inline-block;
    margin-top: 5px;
    
  }
}

.navmenu a{
	text-decoration: none;
	display: inline-block;
	padding: 10px 5px;
	border: 2px solid #065aad;
	color: #065aad;
	font-size: 1.1em;
	text-transform: uppercase;
	background-color: #f89d00;
	font-weight: bold;
	transition-property: color, background-color;
	transition-duration: 1s;
}

.nav-pills > li > a {
	border-radius: 7px;
	padding: 7px 20px;
}

.nav-pills> li > a:hover, .nav-pills> li > a:focus {
	background-color: #ff7f00;
}


/* Clear fix */

.clear{
	clear: both;
}

.clearfix:after{
	content: ".";
	display: none;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix{display: inline-block;}

/* Home body container  */

div.container{
	padding: 0;
}

.row.block1>.col-md-4{
  padding: 0;
}

h3.description{
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 215%;
	font-weight: bold;
}

p.bodydescription{
	font-size: 25px;
	line-height: 150%;
	text-align: justify;
	
}

#block1 {
  margin-top: 280px;
}

.row.block1{
	
	margin: 85px -10px;
	background-color: #ff7f00;;
	box-sizing: border-box;
}



.jumbotron{
  background-color: white !important;
  margin-top: -50px;
  padding-top: 10px;
  padding-bottom: 10px;
}


.jumbotron a.button{
	text-decoration: none;
	font-size: 18px;
	padding: 11px;
	border: 2px solid #4d92e0;
	border-radius: 10px;
	background-color: #7eacf099;
	color: #0009;

}

/*About Body Content  */

.container .maincontainer{
	margin-top: 230px;
	margin-bottom: 70px;
	padding: 0 20px;

}

.maincontainer p.aboutprgh{
	font-size: 22px;
	line-height: 200%;
}

#half-column{
	border-left: 1px solid #0000001a;
}



.maincontainer h2.aboutheaders{
	font-weight: bold;
	font-size: 26px;
	color: #7d2be2cc;
	text-align: center;
}

#listreasons{
	margin: 0 15px;
	padding-bottom: 85px;

}

#listreasons .listreasons h2.aboutheaders{
	font-weight: bold;
	font-size: 26px;
	color: #7d2be2cc;
	text-align: center;
}

#listreasons .listreasons ul.reasonlist li{
	font-size: 22px;
	line-height: 200%;
	text-align: center;
}

#listreasons .listreasons ul.reasonlist li:before {
    content: "✔";
    margin-right: 4px;
}
.container .imgcontainer{
	margin-top: -50px;
	padding: 120px;
	background-image: url(../images/gueguense.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	opacity: 0.75;
	background-color: #000;
}

@media screen and (max-width: 991px){
	.container .imgcontainer{
		display: none;
	}
}

#noparagraph{
	visibility: hidden;
}


/*Programs Content*/

span.rainbowtext{
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: 'Coming Soon', cursive;
  font-weight: bold;
}

.container section .programsdividers{
	margin-top: 75px;
}

section .programsdividers span.schoolprogram{
	font-weight: bold;
	color: #de470be6;
}

section .programsdividers a.underlinelink{
	font-style: italic;
	text-decoration: underline;
}

.programbody .col-md-4 img.kidzprog{
	position: relative;
	bottom: 13px;
	transform: rotate(15deg);
}

#myschoollogo{
	width: 20%;
	float: left;
}



/*Programs 2 Content*/

section .programbody ul.levels{
	font-size: 22px;
}

section .programbody ul.levels li{
	display: inline-block;
}


#kidzlearning{
	margin: 35px auto;
}

/*Services Content*/

.container section .programbody h2.servheading{
	font-weight: bold;
}

section .programbody .row .col-md-12 h3.svcheadings,
section .programbody .servicesection h3.svcheadings{
	text-decoration: underline;
	display: inline-block;
}

section .servicesection{
	margin: 50px 0px;
	padding: 5px;
	box-sizing: border-box;
}

#guardabird{
	display: inline-block;
	width: 4%;
}

#vigoron{
	width: 75%;
}

.clearfix{
	overflow: auto;
}

#complab{
	opacity: 0.8;
	padding: 60px 0;
}

#trans-img{
	width: 25%;
	float: right;
}


#libraryimg{
	padding: 95px 0;
}

/* Tables Content*/
section table{
	margin: 30px auto;
}

.table > thead > tr > th{
	border-bottom: 1px solid black;
	background-color: #006fff80;
}

section table, th, td{
	border: 1px solid black;
}

section table, td{
	text-align: right;
}

section table th{
	font-size: 20px;
	text-align: center;
}

section .programbody{
	margin-top: 260px;
}

p.aboutprgh{
	font-size: 22px;
	line-height: 200%;
	padding: 0 5px;
}


tbody td.tableparagraph{
	font-size: 20px;
	line-height: 200%;
}

@media screen and (max-width: 991px){
	#myschoollogo{
		float: none;
		max-width: 55%;
		margin: 0 auto;
	}


	section img.kidzprog{
		transform: none !important;
		max-width: 50%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	p.aboutprgh{
		padding: 0 12px;
	}

	section table{
		width: 85%;
		margin: 15px auto;
	}	
}

@media screen and (max-width: 767px){
	section table.table{
		width: 90%;
		margin: 15px auto;
	}	
}

/* Events Calendar */

.container .calendar-table{
	margin: 10px auto;
}

.container .calendar-table thead th.calendarheader, .container .calendar-table thead th.nobackgroundcolor{
	font-size: 15px;
	background-color: #b2cef280;
}

.container .calendar-table thead th a.month-title{
	font-size: 22px;
	font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
	color: #000;
}

.container .programbody ul{
	list-style: square;
}

.container .programbody ul li{
	font-size: 1.15em;
	line-height: 170%;
}

#list-holidays{
	position: relative;
	left: 300px; 
	bottom: 5px;
} 

/*Contacts*/

.container .col-md-6 .contactcontent{
	padding: 50px;
	font-size: 1.1em;
}

.container .programbody .col-md-6 table#tablecontact tbody .tableparagraph{
	padding: 20px 85px;
}


/* Footer */

footer{
	background-color: #065aad;
}

#signup{
	font-family: 'Lato', 'Helvetica', arial, serif;
	font-size: 16px;
	font-weight: bolder;
	color: white;
	margin-top: 20px;
	margin-left: 3px;

}

label{
	display: none;
}

.formwrapper{
	padding-left: 3px;
	box-sizing: border-box;
}

input[type="email"]{

	padding: 5px 0px;
	border: 1px solid #CDCDCD;
}

.hidden-label{
	overflow: hidden;
	visibility: hidden;
}

.btn{
	margin-top: 1px;
	padding: 3px 5px;
}

.btn-default{
	background-color: #ec9412;
	font-family: 'Lato', 'Helvetica', arial, serif;
	font-size: 87%;
}

.social-media{
	margin-top: 20px:;
}

p.followus{
	margin-top: 20px;
	color: #000;
	font-weight: bolder;
}

h5.minilist{
	margin-top: 20px;
	color: #000;
	font-weight: bolder;
}

.minifooter li{
	/*list-style: circle;*/
	margin: 7px;
	font-weight: bold;
}

ul {
    list-style: none;
}

.minifooter li:before {
    content: "+";
    margin-right: 4px;
}

.minifooter li a{
	color: #fff;
	text-decoration: none;
}

footer .mainfooter ul.minifooter{
	
	text-align: left;
	margin: 0;
	padding: 0;

}

.minicontact{
	color: #fff;
	font-size: 15px;
	line-height: 105%;
}

#minicontact{
	color: #e6b016;

}

.miniaddress{
	margin-top: 20px;
	float: left;
	padding: 0 7px 0 0;
	font-weight: bold;
}

#subfooter{
	display: inline-block;
	padding: 20px 0px;
}

footer .subfooter span.minisubfooter{
	display: block;
	font-size: 13px;
	font-weight: bold;
	float: right;
	line-height: 25%;
}


/* Media queries entries  */
@media screen and (max-width: 991px){
	footer .col-md-3{
		width:100%;
		display:inline-block;
		text-align:center;
		margin-top:10px;
						}

	footer .col-md-3 .socialmedia{
		float: none;
	}

	footer .mainfooter ul.minifooter{
		text-align: center;
		margin: 0;
		padding: 0;
	}

	footer .col-md-3 .miniaddress{
		float: none;
	}
}


/*   */
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <title>International Language School | ILA</title>

    <!-- Latest compiled and minified CSS -->
      <!-- Latest compiled and minified CSS -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
	  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/cycle2.js"></script>
    <script type="text/javascript" src="js/script"></script>

  </head>

  <body>

  <!--to hide Logo Image and to keep only Logo name title and motto when rescreen to small-->
    
    
  	<div class="headermenu navbar navbar-fixed-top">
      <div id="preheader">
      <div class="preheader1">
        <div class="row">
          <div class="container">
            <div class="socialmedia">
                <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="20" height="20"></a>
                <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="20" height="20"></a>
                <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="20" height="20"></a>
            </div><!--end of div socialmedia-->

            <p class="top-address">Americas #3, Sector D, Anden 4, Casa Comunitaria. Managua, Nicaragua</p>
            <span class="top-address"> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>  +505.22532768</span> <span class="top-address" id="topaddress"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <a href="mailto:info@ila.com">info@ila.com</a></span>

            <a href="#" class="spanish">En EspaÑol</a>
            <span class="login btn btn-primary">Log In</span>
          </div><!--end of div container-->
        </div><!--end of div row-->
      </div><!--end of div preheader1-->
    </div><!--end of div preheader-->
      <div class="container">
      
        <div id="title-header">
          <div class="row">
            <div class="col-xs-6 col-md-4"><!--eliminated the previous periods before all col-->

              <a href="Home.html"><img class="img-responsive hidden-xs hidden-sm" alt="Responsive image" src="images/Final-ILA-Logo.jpg" id="LogoSchool" alt="School Logo"></a>
              <!--how to "hide" image logo when size becomes small-->
            </div><!--end of .col-xs-6 .col-md-4-->

            <div class="col-xs-12 col-md-8">
              <div class="name-motto">
                <h1 class="title">International Language Academy-ILA</h1>
                <span id="motto">Where there are no barriers</span>
                <!--to keep tittle and motto when resized to small and leave out img logo -->
              </div><!--end of div name-motto-->
              
            </div><!--end of div .col-xs-12 .col-md-8-->

           </div><!--end of div row-->

        </div><!--end div title-header-->

      </div><!--end of div container-->
  		
  		
  		<!--align center the navigation menu-->
      <!--how to adjust padding and margins for navigation when screen is small and medium-->
      <!--to have the nav menu and header fixed when scrolling up and down-->
  		<div class="container">
        <nav class="navmenu">
            <ul class="nav nav-pills center-pills">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Programs & Classes</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
        </nav>
      </div><!--end of div container-->
      
  	</div><!-- end of div headermenu-->
  	
  	

      <div class="container">
        <div class="row block1" id="block1">
          <div class="col-md-8">

            <h3 class="description">Ready for the Challenge?</h3>
            <p class="bodydescription">Inter Language School is the only school in the country that gives the tools to learn the language you need in a fun, practical and affordable way.</p>

          </div><!--end of col md 8-->

          <div class="col-md-4 firstimg">

            <img class="img-responsive" src="images/goal_setting_plan.png"> <!--to adjust image to cover the remaining bottom padding-->

          </div><!--end of col md 4-->
        </div><!--end of div row-->

        <div class="row block1">
          <div class="col-md-4 secondimg">
            <img class="img-responsive" src="images/virtual-classroom.jpg"> <!--to adjust image to cover the remaining bottom padding--> 
          </div><!--end of col md 4-->

          <div class="col-md-8">

            <h3 class="description">We're Different!</h3>
            <p class="bodydescription">We care that our students get a satisfactory level of fluency to communicate. Our students see the difference. </p>
            
          </div><!--end of col md 8-->
        </div><!--end of div row-->

        <div class="row block1">
          <div class="col-md-8">

            <h3 class="description">Exposure</h3>
            <p class="bodydescription">International exposure and language encouragement to speak the language at all times.</p>

          </div><!--end of col md 8-->

          <div class="col-md-4 thirdimg">

            <img class="img-responsive" src="images/Saludos-.jpg"> <!--to adjust image to cover the remaining right padding-->


          </div><!--end of col md 4-->
        </div><!--end of div row-->

        <div class="jumbotron">
          <div class="container">
            <h3 class="description">Special Programs</h3>
            <p class="bodydescription">Need to learn banking, business, medical terms for your profession? Going to a conference but need to communicate the language with your peers? We create special group classes for your needs.</p>
            <a class="button" href="#">Learn more</a>
  
          </div><!--end of div container-->
        </div><!--end of div jumbotron--> <!--to keep the same aligment to the same visual margins and paddings the above small containers and when to keep it when screen size is small-->


    <footer>
      <div class="mainfooter">
        <div class="container">
          <div class="row">
            <div class="col-md-3">
              <h5 id="signup"> Sign Up For Our Newsletter </h5>
              <form class="subscription">
                
                <div class="formwrapper">
                  <label for="Youremail" class="hidden-label">Your Email</label>
                  <input id="Youremail" type="email" name="email" placeholder="Email">
                  <button class="btn btn-default">Subscribe</button><!--make this form responsive-->
                </div><!--end of div formwrapper-->
                
              </form>       
            </div><!--end of div first col md 3-->

            <div class="col-md-3">
              <div class="social-media">
                
                <p class="followus">Follow us on:</p>

                <div class="socialmedia">
                  <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="35" height="35"></a>
                  <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="35" height="35"></a>
                  <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="35" height="35"></a>
                </div><!--end of div socialmedia-->
              </div><!--end of div social-media-->
 
            </div><!--end of col md 3-->

            <div class="col-md-3">
              <h5 class="minilist">Quick Links</h5>
              <ul class="minifooter">
                <li><a href="#">EspaÑol</a></li>
                <li><a href="#">Programs &amp; Classes</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>

            <div class="col-md-3">
              <div class="miniaddress">
                <p class="minicontact">Americas #3, Sector D, Anden 4, Casa Comunitaria.</p> 
                <p class="minicontact">Managua, Nicaragua</p>
                <p class="minicontact">+505.22532768</p>
                <a href="mailto:info@ila.com" id="minicontact">info@ila.com</a>
              </div><!--end of class miniaddress-->
              
            </div><!--end of last col md 3-->
             
          </div><!--end of div row-->
        </div><!--end of div container-->

      </div><!--end of mainfooter-->

      <div class="subfooter">
          <div class="row" id="subfooter">
            <div class="container">
              <span class="minisubfooter">This is a practice Webpage</span>
              <span class="minisubfooter"> Designed by Alfredo DSw &reg;</span>
            </div><!--end of class container-->
          </div><!--end of class row-->
      </div><!--end of div subfooter-->   

    </footer>      

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  </body>
  </html>

3 个答案:

答案 0 :(得分：1)

   $(window).scroll(function(){
          var scrolltop = $(this).scrollTop();
           if(scrolltop >=100){
                $('#pre-header,#id-of-your-logo').css('display','none');
           }
           else{
                $('#pre-header,#id-of-your-logo').css('display','block');
           }

希望这会有所帮助..

答案 1 :(得分：0)

你在找这个吗？

我刚刚向其添加了JavaScript，因此如果您向下滚动，headermenu会获得一个新的shrink类，其{c}规则为display: none preheader和LogoSchool。

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 100) {
    $(".headermenu").addClass("shrink");
  } else {
    $(".headermenu").removeClass("shrink");
  }
});
html {
  background-color: #fff;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f6f6f6 !important;
}

.container {
  max-width: 985px;
  margin: 0 auto;
}

#LogoSchool {
  display: inline-block;
  width: 75%;
  height: auto;
}


/*Header section*/

#preheader .preheader1 a.spanish {
  display: inline;
  color: #0b5fb1;
  font-weight: bolder;
  position: relative;
  left: 350px;
  bottom: 7px;
}

#preheader .preheader1 .login {
  float: right;
  margin-right: 125px;
  margin-top: -15px;
}

#preheader .preheader1 .login .btn.btn-primary {
  background-color: #fff;
}


/*it doesnt change background color for btn*/

#preheader .preheader-hidden {
  display: none;
}

.socialmedia {
  float: left;
  margin: 3px auto;
}

.top-address {
  display: inline-block;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 85%;
  text-align: center;
  margin: 0 auto;
  padding: 0 175px;
}

#topaddress {
  margin: 0 -300px;
}

.headermenu {
  background-color: #fff;
  padding-bottom: 1px;
  border: 2px solid #0000001A;
}

.navbar-fixed-top {
  z-index: 9999;
}

#title-header {
  margin: auto;
  box-sizing: border-box;
}

#title-header h1.title {
  display: inline;
  right: 220px;
  padding: 5px;
  /*eliminated position relative, bottom and left*/
  font-family: 'Francois One', sans-serif;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 2px;
}

#motto {
  display: inline-block;
  font-family: 'Damion', cursive;
  font-size: 15px;
  letter-spacing: 2px;
  /*eliminated position relative and bottom*/
  color: #000000b3;
}

.col-md-8 {
  margin-top: 25px;
}

@media screen and (max-width: 991px) {
  #preheader {
    display: none;
  }
  #motto {
    display: none;
  }
  .name-motto {
    display: inline-block;
    margin-left: 50%;
  }
  .navmenu .nav li {
    margin-right: 0;
  }
}

@media screen and (max-width: 766px) {
  .col-xs-12 {
    margin: 15px auto;
  }
}

.
/*Slideshow Pictures*/


/*Navigation Menu Style  */

.navmenu {
  margin: 0 auto;
}

.navmenu ul {
  float: left;
}

.navmenu li {
  display: inline-block;
  list-style: none;
  margin-right: 7px;
}

@media screen and (max-width: 990px) {
  .navmenu li {
    display: inline-block;
    margin-top: 5px;
  }
}

.navmenu a {
  text-decoration: none;
  display: inline-block;
  padding: 10px 5px;
  border: 2px solid #065aad;
  color: #065aad;
  font-size: 1.1em;
  text-transform: uppercase;
  background-color: #f89d00;
  font-weight: bold;
  transition-property: color, background-color;
  transition-duration: 1s;
}

.nav-pills>li>a {
  border-radius: 7px;
  padding: 7px 20px;
}

.nav-pills>li>a:hover,
.nav-pills>li>a:focus {
  background-color: #ff7f00;
}


/* Clear fix */

.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: none;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}


/* Home body container  */

div.container {
  padding: 0;
}

.row.block1>.col-md-4 {
  padding: 0;
}

h3.description {
  font-family: "Lucida Sans Unicode", sans-serif;
  font-size: 215%;
  font-weight: bold;
}

p.bodydescription {
  font-size: 25px;
  line-height: 150%;
  text-align: justify;
}

#block1 {
  margin-top: 280px;
}

.row.block1 {
  margin: 85px -10px;
  background-color: #ff7f00;
  ;
  box-sizing: border-box;
}

.jumbotron {
  background-color: white !important;
  margin-top: -50px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.jumbotron a.button {
  text-decoration: none;
  font-size: 18px;
  padding: 11px;
  border: 2px solid #4d92e0;
  border-radius: 10px;
  background-color: #7eacf099;
  color: #0009;
}


/*About Body Content  */

.container .maincontainer {
  margin-top: 230px;
  margin-bottom: 70px;
  padding: 0 20px;
}

.maincontainer p.aboutprgh {
  font-size: 22px;
  line-height: 200%;
}

#half-column {
  border-left: 1px solid #0000001a;
}

.maincontainer h2.aboutheaders {
  font-weight: bold;
  font-size: 26px;
  color: #7d2be2cc;
  text-align: center;
}

#listreasons {
  margin: 0 15px;
  padding-bottom: 85px;
}

#listreasons .listreasons h2.aboutheaders {
  font-weight: bold;
  font-size: 26px;
  color: #7d2be2cc;
  text-align: center;
}

#listreasons .listreasons ul.reasonlist li {
  font-size: 22px;
  line-height: 200%;
  text-align: center;
}

#listreasons .listreasons ul.reasonlist li:before {
  content: "✔";
  margin-right: 4px;
}

.container .imgcontainer {
  margin-top: -50px;
  padding: 120px;
  background-image: url(../images/gueguense.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  opacity: 0.75;
  background-color: #000;
}

@media screen and (max-width: 991px) {
  .container .imgcontainer {
    display: none;
  }
}

#noparagraph {
  visibility: hidden;
}


/*Programs Content*/

span.rainbowtext {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: 'Coming Soon', cursive;
  font-weight: bold;
}

.container section .programsdividers {
  margin-top: 75px;
}

section .programsdividers span.schoolprogram {
  font-weight: bold;
  color: #de470be6;
}

section .programsdividers a.underlinelink {
  font-style: italic;
  text-decoration: underline;
}

.programbody .col-md-4 img.kidzprog {
  position: relative;
  bottom: 13px;
  transform: rotate(15deg);
}

#myschoollogo {
  width: 20%;
  float: left;
}


/*Programs 2 Content*/

section .programbody ul.levels {
  font-size: 22px;
}

section .programbody ul.levels li {
  display: inline-block;
}

#kidzlearning {
  margin: 35px auto;
}


/*Services Content*/

.container section .programbody h2.servheading {
  font-weight: bold;
}

section .programbody .row .col-md-12 h3.svcheadings,
section .programbody .servicesection h3.svcheadings {
  text-decoration: underline;
  display: inline-block;
}

section .servicesection {
  margin: 50px 0px;
  padding: 5px;
  box-sizing: border-box;
}

#guardabird {
  display: inline-block;
  width: 4%;
}

#vigoron {
  width: 75%;
}

.clearfix {
  overflow: auto;
}

#complab {
  opacity: 0.8;
  padding: 60px 0;
}

#trans-img {
  width: 25%;
  float: right;
}

#libraryimg {
  padding: 95px 0;
}


/* Tables Content*/

section table {
  margin: 30px auto;
}

.table>thead>tr>th {
  border-bottom: 1px solid black;
  background-color: #006fff80;
}

section table,
th,
td {
  border: 1px solid black;
}

section table,
td {
  text-align: right;
}

section table th {
  font-size: 20px;
  text-align: center;
}

section .programbody {
  margin-top: 260px;
}

p.aboutprgh {
  font-size: 22px;
  line-height: 200%;
  padding: 0 5px;
}

tbody td.tableparagraph {
  font-size: 20px;
  line-height: 200%;
}

@media screen and (max-width: 991px) {
  #myschoollogo {
    float: none;
    max-width: 55%;
    margin: 0 auto;
  }
  section img.kidzprog {
    transform: none !important;
    max-width: 50%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  p.aboutprgh {
    padding: 0 12px;
  }
  section table {
    width: 85%;
    margin: 15px auto;
  }
}

@media screen and (max-width: 767px) {
  section table.table {
    width: 90%;
    margin: 15px auto;
  }
}


/* Events Calendar */

.container .calendar-table {
  margin: 10px auto;
}

.container .calendar-table thead th.calendarheader,
.container .calendar-table thead th.nobackgroundcolor {
  font-size: 15px;
  background-color: #b2cef280;
}

.container .calendar-table thead th a.month-title {
  font-size: 22px;
  font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
  color: #000;
}

.container .programbody ul {
  list-style: square;
}

.container .programbody ul li {
  font-size: 1.15em;
  line-height: 170%;
}

#list-holidays {
  position: relative;
  left: 300px;
  bottom: 5px;
}


/*Contacts*/

.container .col-md-6 .contactcontent {
  padding: 50px;
  font-size: 1.1em;
}

.container .programbody .col-md-6 table#tablecontact tbody .tableparagraph {
  padding: 20px 85px;
}


/* Footer */

footer {
  background-color: #065aad;
}

#signup {
  font-family: 'Lato', 'Helvetica', arial, serif;
  font-size: 16px;
  font-weight: bolder;
  color: white;
  margin-top: 20px;
  margin-left: 3px;
}

label {
  display: none;
}

.formwrapper {
  padding-left: 3px;
  box-sizing: border-box;
}

input[type="email"] {
  padding: 5px 0px;
  border: 1px solid #CDCDCD;
}

.hidden-label {
  overflow: hidden;
  visibility: hidden;
}

.btn {
  margin-top: 1px;
  padding: 3px 5px;
}

.btn-default {
  background-color: #ec9412;
  font-family: 'Lato', 'Helvetica', arial, serif;
  font-size: 87%;
}

.social-media {
  margin-top: 20px:;
}

p.followus {
  margin-top: 20px;
  color: #000;
  font-weight: bolder;
}

h5.minilist {
  margin-top: 20px;
  color: #000;
  font-weight: bolder;
}

.minifooter li {
  /*list-style: circle;*/
  margin: 7px;
  font-weight: bold;
}

ul {
  list-style: none;
}

.minifooter li:before {
  content: "+";
  margin-right: 4px;
}

.minifooter li a {
  color: #fff;
  text-decoration: none;
}

footer .mainfooter ul.minifooter {
  text-align: left;
  margin: 0;
  padding: 0;
}

.minicontact {
  color: #fff;
  font-size: 15px;
  line-height: 105%;
}

#minicontact {
  color: #e6b016;
}

.miniaddress {
  margin-top: 20px;
  float: left;
  padding: 0 7px 0 0;
  font-weight: bold;
}

#subfooter {
  display: inline-block;
  padding: 20px 0px;
}

footer .subfooter span.minisubfooter {
  display: block;
  font-size: 13px;
  font-weight: bold;
  float: right;
  line-height: 25%;
}


/* Media queries entries  */

@media screen and (max-width: 991px) {
  footer .col-md-3 {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 10px;
  }
  footer .col-md-3 .socialmedia {
    float: none;
  }
  footer .mainfooter ul.minifooter {
    text-align: center;
    margin: 0;
    padding: 0;
  }
  footer .col-md-3 .miniaddress {
    float: none;
  }
}

.shrink>#preheader,
.shrink #LogoSchool {
  display: none;
}


/*   */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>International Language School | ILA</title>

  <!-- Latest compiled and minified CSS -->
  <!-- Latest compiled and minified CSS -->

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/cycle2.js"></script>
  <script type="text/javascript" src="js/script"></script>

</head>

<body>

  <!--to hide Logo Image and to keep only Logo name title and motto when rescreen to small-->


  <div class="headermenu navbar navbar-fixed-top">
    <div id="preheader">
      <div class="preheader1">
        <div class="row">
          <div class="container">
            <div class="socialmedia">
              <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="20" height="20"></a>
              <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="20" height="20"></a>
              <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="20" height="20"></a>
            </div>
            <!--end of div socialmedia-->

            <p class="top-address">Americas #3, Sector D, Anden 4, Casa Comunitaria. Managua, Nicaragua</p>
            <span class="top-address"> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> +505.22532768</span> <span class="top-address" id="topaddress"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <a href="mailto:info@ila.com">info@ila.com</a></span>

            <a href="#" class="spanish">En EspaÑol</a>
            <span class="login btn btn-primary">Log In</span>
          </div>
          <!--end of div container-->
        </div>
        <!--end of div row-->
      </div>
      <!--end of div preheader1-->
    </div>
    <!--end of div preheader-->
    <div class="container">

      <div id="title-header">
        <div class="row">
          <div class="col-xs-6 col-md-4">
            <!--eliminated the previous periods before all col-->

            <a href="Home.html"><img class="img-responsive hidden-xs hidden-sm" alt="Responsive image" src="images/Final-ILA-Logo.jpg" id="LogoSchool" alt="School Logo"></a>
            <!--how to "hide" image logo when size becomes small-->
          </div>
          <!--end of .col-xs-6 .col-md-4-->

          <div class="col-xs-12 col-md-8">
            <div class="name-motto">
              <h1 class="title">International Language Academy-ILA</h1>
              <span id="motto">Where there are no barriers</span>
              <!--to keep tittle and motto when resized to small and leave out img logo -->
            </div>
            <!--end of div name-motto-->

          </div>
          <!--end of div .col-xs-12 .col-md-8-->

        </div>
        <!--end of div row-->

      </div>
      <!--end div title-header-->

    </div>
    <!--end of div container-->


    <!--align center the navigation menu-->
    <!--how to adjust padding and margins for navigation when screen is small and medium-->
    <!--to have the nav menu and header fixed when scrolling up and down-->
    <div class="container">
      <nav class="navmenu">
        <ul class="nav nav-pills center-pills">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Programs & Classes</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <!--end of div container-->

  </div>
  <!-- end of div headermenu-->



  <div class="container">
    <div class="row block1" id="block1">
      <div class="col-md-8">

        <h3 class="description">Ready for the Challenge?</h3>
        <p class="bodydescription">Inter Language School is the only school in the country that gives the tools to learn the language you need in a fun, practical and affordable way.</p>

      </div>
      <!--end of col md 8-->

      <div class="col-md-4 firstimg">

        <img class="img-responsive" src="images/goal_setting_plan.png">
        <!--to adjust image to cover the remaining bottom padding-->

      </div>
      <!--end of col md 4-->
    </div>
    <!--end of div row-->

    <div class="row block1">
      <div class="col-md-4 secondimg">
        <img class="img-responsive" src="images/virtual-classroom.jpg">
        <!--to adjust image to cover the remaining bottom padding-->
      </div>
      <!--end of col md 4-->

      <div class="col-md-8">

        <h3 class="description">We're Different!</h3>
        <p class="bodydescription">We care that our students get a satisfactory level of fluency to communicate. Our students see the difference. </p>

      </div>
      <!--end of col md 8-->
    </div>
    <!--end of div row-->

    <div class="row block1">
      <div class="col-md-8">

        <h3 class="description">Exposure</h3>
        <p class="bodydescription">International exposure and language encouragement to speak the language at all times.</p>

      </div>
      <!--end of col md 8-->

      <div class="col-md-4 thirdimg">

        <img class="img-responsive" src="images/Saludos-.jpg">
        <!--to adjust image to cover the remaining right padding-->


      </div>
      <!--end of col md 4-->
    </div>
    <!--end of div row-->

    <div class="jumbotron">
      <div class="container">
        <h3 class="description">Special Programs</h3>
        <p class="bodydescription">Need to learn banking, business, medical terms for your profession? Going to a conference but need to communicate the language with your peers? We create special group classes for your needs.</p>
        <a class="button" href="#">Learn more</a>

      </div>
      <!--end of div container-->
    </div>
    <!--end of div jumbotron-->
    <!--to keep the same aligment to the same visual margins and paddings the above small containers and when to keep it when screen size is small-->


    <footer>
      <div class="mainfooter">
        <div class="container">
          <div class="row">
            <div class="col-md-3">
              <h5 id="signup"> Sign Up For Our Newsletter </h5>
              <form class="subscription">

                <div class="formwrapper">
                  <label for="Youremail" class="hidden-label">Your Email</label>
                  <input id="Youremail" type="email" name="email" placeholder="Email">
                  <button class="btn btn-default">Subscribe</button>
                  <!--make this form responsive-->
                </div>
                <!--end of div formwrapper-->

              </form>
            </div>
            <!--end of div first col md 3-->

            <div class="col-md-3">
              <div class="social-media">

                <p class="followus">Follow us on:</p>

                <div class="socialmedia">
                  <a href="http://www.facebook.com"><img src="images/apple-touch-icon-precomposed.png" width="35" height="35"></a>
                  <a href="http://www.twitter.com"><img src="images/Twitter_icon.png" width="35" height="35"></a>
                  <a href="http://www.google.com"><img src="images/GooglePlus-logos-02.png" width="35" height="35"></a>
                </div>
                <!--end of div socialmedia-->
              </div>
              <!--end of div social-media-->

            </div>
            <!--end of col md 3-->

            <div class="col-md-3">
              <h5 class="minilist">Quick Links</h5>
              <ul class="minifooter">
                <li><a href="#">EspaÑol</a></li>
                <li><a href="#">Programs &amp; Classes</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>

            <div class="col-md-3">
              <div class="miniaddress">
                <p class="minicontact">Americas #3, Sector D, Anden 4, Casa Comunitaria.</p>
                <p class="minicontact">Managua, Nicaragua</p>
                <p class="minicontact">+505.22532768</p>
                <a href="mailto:info@ila.com" id="minicontact">info@ila.com</a>
              </div>
              <!--end of class miniaddress-->

            </div>
            <!--end of last col md 3-->

          </div>
          <!--end of div row-->
        </div>
        <!--end of div container-->

      </div>
      <!--end of mainfooter-->

      <div class="subfooter">
        <div class="row" id="subfooter">
          <div class="container">
            <span class="minisubfooter">This is a practice Webpage</span>
            <span class="minisubfooter"> Designed by Alfredo DSw &reg;</span>
          </div>
          <!--end of class container-->
        </div>
        <!--end of class row-->
      </div>
      <!--end of div subfooter-->

    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

答案 2 :(得分：0)

滚动时的

Bootstrap导航栏动画：http://codepen.io/davidtmiller/pen/yepJoX 当你滚动导航栏时，将它的类更改为.affix，你可以像这样隐藏预读器。

.navbar-default.affix #preheader{
   display: none;
}
相关问题
最新问题