0
ページのスクロールに合わせてヘッダーをアニメーション化する方法については、多くの質問があります。私は同様の質問に対する多くの回答について基本的な考えを持っていますが、私のケースはかなり複雑です。私のヘッダーは静的であるか固定されているときに余分なスペースを必要とします。フルヘッダーには、ソーシャルメディアリンク、小さなアドレスとログインボタン、タイトルヘッダー：ロゴイメージとビジネスとモットーの名前、そして最後にナビゲーションメニューを含むプレヘッダーが含まれています。ここでも、すべてがdivで次のサブディビジョンとラップされています。私はテンプレートとしてメニューのナビゲーションとしてブートストラップを使用しました。基本的に私がやってみたいのは、タイトル名、モットー、ナビゲーションメニューだけを残して、プレヘッダーとロゴの画像が消えてしまいたいということです。以下のコードがあります。jqueryでスクロールダウンするときのヘッダーの縮小
Cssコードもスニペットに含まれていますが、あまりにも長く混乱するとごめんなさい。それは同じプロジェクトの他のページのスタイリングを含んでいます。任意の提案をいただければ幸いです。
html{
\t background-color: #fff;
}
body{
\t margin: 0;
\t padding: 0;
\t background-color: #f6f6f6 !important;
\t
}
.container{
\t max-width: 985px;
\t margin: 0 auto;
}
#LogoSchool{
\t display: inline-block;
\t width: 75%;
\t height: auto;
}
/*Header section*/
#preheader .preheader1 a.spanish{
\t display: inline;
\t color: #0b5fb1;
\t font-weight: bolder;
\t position: relative;
\t left: 350px;
\t bottom: 7px;
}
#preheader .preheader1 .login{
\t float: right;
\t margin-right: 125px;
\t margin-top: -15px;
}
#preheader .preheader1 .login .btn.btn-primary{
\t background-color: #fff;
} /*it doesnt change background color for btn*/
#preheader .preheader-hidden{
\t display: none;
}
.socialmedia{
\t float: left;
\t margin: 3px auto;
}
.top-address{
\t display: inline-block;
\t font-family: "Comic Sans MS", cursive, sans-serif;
\t font-size: 85%;
\t text-align: center;
\t margin: 0 auto;
\t padding: 0 175px;
}
#topaddress{
\t margin: 0 -300px;
}
.headermenu{
\t background-color: #fff;
\t padding-bottom: 1px;
\t border: 2px solid #0000001A;
}
.navbar-fixed-top{
\t z-index: 9999;
}
#title-header{
\t margin: auto;
\t box-sizing: border-box;
}
#title-header h1.title{
\t display: inline;
\t right: 220px;
\t padding: 5px;
\t /*eliminated position relative, bottom and left*/
\t font-family: 'Francois One', sans-serif;
\t font-size: 23px;
\t font-weight: bold;
\t letter-spacing: 2px;
}
#motto{
\t display: inline-block;
\t font-family: 'Damion', cursive;
\t font-size: 15px;
\t letter-spacing: 2px;
\t /*eliminated position relative and bottom*/
\t color: #000000b3;
}
.col-md-8{
\t margin-top: 25px;
}
@media screen and (max-width: 991px){
\t #preheader{
\t \t display: none;
\t }
\t #motto{
\t \t display: none;
\t }
\t .name-motto{
\t \t display: inline-block;
\t \t margin-left: 50%;
\t \t }
\t .navmenu .nav li{
\t \t margin-right: 0;
\t }
}
@media screen and (max-width: 766px){
\t .col-xs-12{
\t \t margin: 15px auto;
\t }
\t
}
.
/*Slideshow Pictures*/
/*Navigation Menu Style */
.navmenu{
margin: 0 auto;
}
.navmenu ul{
\t float: left;
}
.navmenu li{
\t display: inline-block;
\t list-style: none;
\t margin-right: 7px;
}
@media screen and (max-width: 990px){
.navmenu li{
display: inline-block;
margin-top: 5px;
}
}
.navmenu a{
\t text-decoration: none;
\t display: inline-block;
\t padding: 10px 5px;
\t border: 2px solid #065aad;
\t color: #065aad;
\t font-size: 1.1em;
\t text-transform: uppercase;
\t background-color: #f89d00;
\t font-weight: bold;
\t transition-property: color, background-color;
\t transition-duration: 1s;
}
.nav-pills > li > a {
\t border-radius: 7px;
\t padding: 7px 20px;
}
.nav-pills> li > a:hover, .nav-pills> li > a:focus {
\t background-color: #ff7f00;
}
/* Clear fix */
.clear{
\t clear: both;
}
.clearfix:after{
\t content: ".";
\t display: none;
\t height: 0;
\t clear: both;
\t visibility: hidden;
}
.clearfix{display: inline-block;}
/* Home body container */
div.container{
\t padding: 0;
}
.row.block1>.col-md-4{
padding: 0;
}
h3.description{
\t font-family: "Lucida Sans Unicode", sans-serif;
\t font-size: 215%;
\t font-weight: bold;
}
p.bodydescription{
\t font-size: 25px;
\t line-height: 150%;
\t text-align: justify;
\t
}
#block1 {
margin-top: 280px;
}
.row.block1{
\t
\t margin: 85px -10px;
\t background-color: #ff7f00;;
\t box-sizing: border-box;
}
.jumbotron{
background-color: white !important;
margin-top: -50px;
padding-top: 10px;
padding-bottom: 10px;
}
.jumbotron a.button{
\t text-decoration: none;
\t font-size: 18px;
\t padding: 11px;
\t border: 2px solid #4d92e0;
\t border-radius: 10px;
\t background-color: #7eacf099;
\t color: #0009;
}
/*About Body Content */
.container .maincontainer{
\t margin-top: 230px;
\t margin-bottom: 70px;
\t padding: 0 20px;
}
.maincontainer p.aboutprgh{
\t font-size: 22px;
\t line-height: 200%;
}
#half-column{
\t border-left: 1px solid #0000001a;
}
.maincontainer h2.aboutheaders{
\t font-weight: bold;
\t font-size: 26px;
\t color: #7d2be2cc;
\t text-align: center;
}
#listreasons{
\t margin: 0 15px;
\t padding-bottom: 85px;
}
#listreasons .listreasons h2.aboutheaders{
\t font-weight: bold;
\t font-size: 26px;
\t color: #7d2be2cc;
\t text-align: center;
}
#listreasons .listreasons ul.reasonlist li{
\t font-size: 22px;
\t line-height: 200%;
\t text-align: center;
}
#listreasons .listreasons ul.reasonlist li:before {
content: "✔";
margin-right: 4px;
}
.container .imgcontainer{
\t margin-top: -50px;
\t padding: 120px;
\t background-image: url(../images/gueguense.jpg);
\t background-repeat: no-repeat;
\t background-size: cover;
\t background-position: top center;
\t opacity: 0.75;
\t background-color: #000;
}
@media screen and (max-width: 991px){
\t .container .imgcontainer{
\t \t display: none;
\t }
}
#noparagraph{
\t 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{
\t margin-top: 75px;
}
section .programsdividers span.schoolprogram{
\t font-weight: bold;
\t color: #de470be6;
}
section .programsdividers a.underlinelink{
\t font-style: italic;
\t text-decoration: underline;
}
.programbody .col-md-4 img.kidzprog{
\t position: relative;
\t bottom: 13px;
\t transform: rotate(15deg);
}
#myschoollogo{
\t width: 20%;
\t float: left;
}
/*Programs 2 Content*/
section .programbody ul.levels{
\t font-size: 22px;
}
section .programbody ul.levels li{
\t display: inline-block;
}
#kidzlearning{
\t margin: 35px auto;
}
/*Services Content*/
.container section .programbody h2.servheading{
\t font-weight: bold;
}
section .programbody .row .col-md-12 h3.svcheadings,
section .programbody .servicesection h3.svcheadings{
\t text-decoration: underline;
\t display: inline-block;
}
section .servicesection{
\t margin: 50px 0px;
\t padding: 5px;
\t box-sizing: border-box;
}
#guardabird{
\t display: inline-block;
\t width: 4%;
}
#vigoron{
\t width: 75%;
}
.clearfix{
\t overflow: auto;
}
#complab{
\t opacity: 0.8;
\t padding: 60px 0;
}
#trans-img{
\t width: 25%;
\t float: right;
}
#libraryimg{
\t padding: 95px 0;
}
/* Tables Content*/
section table{
\t margin: 30px auto;
}
.table > thead > tr > th{
\t border-bottom: 1px solid black;
\t background-color: #006fff80;
}
section table, th, td{
\t border: 1px solid black;
}
section table, td{
\t text-align: right;
}
section table th{
\t font-size: 20px;
\t text-align: center;
}
section .programbody{
\t margin-top: 260px;
}
p.aboutprgh{
\t font-size: 22px;
\t line-height: 200%;
\t padding: 0 5px;
}
tbody td.tableparagraph{
\t font-size: 20px;
\t line-height: 200%;
}
@media screen and (max-width: 991px){
\t #myschoollogo{
\t \t float: none;
\t \t max-width: 55%;
\t \t margin: 0 auto;
\t }
\t section img.kidzprog{
\t \t transform: none !important;
\t \t max-width: 50%;
\t \t margin: 0 auto;
\t \t box-sizing: border-box;
\t }
\t p.aboutprgh{
\t \t padding: 0 12px;
\t }
\t section table{
\t \t width: 85%;
\t \t margin: 15px auto;
\t } \t
}
@media screen and (max-width: 767px){
\t section table.table{
\t \t width: 90%;
\t \t margin: 15px auto;
\t } \t
}
/* Events Calendar */
.container .calendar-table{
\t margin: 10px auto;
}
.container .calendar-table thead th.calendarheader, .container .calendar-table thead th.nobackgroundcolor{
\t font-size: 15px;
\t background-color: #b2cef280;
}
.container .calendar-table thead th a.month-title{
\t font-size: 22px;
\t font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
\t color: #000;
}
.container .programbody ul{
\t list-style: square;
}
.container .programbody ul li{
\t font-size: 1.15em;
\t line-height: 170%;
}
#list-holidays{
\t position: relative;
\t left: 300px;
\t bottom: 5px;
}
/*Contacts*/
.container .col-md-6 .contactcontent{
\t padding: 50px;
\t font-size: 1.1em;
}
.container .programbody .col-md-6 table#tablecontact tbody .tableparagraph{
\t padding: 20px 85px;
}
/* Footer */
footer{
\t background-color: #065aad;
}
#signup{
\t font-family: 'Lato', 'Helvetica', arial, serif;
\t font-size: 16px;
\t font-weight: bolder;
\t color: white;
\t margin-top: 20px;
\t margin-left: 3px;
}
label{
\t display: none;
}
.formwrapper{
\t padding-left: 3px;
\t box-sizing: border-box;
}
input[type="email"]{
\t padding: 5px 0px;
\t border: 1px solid #CDCDCD;
}
.hidden-label{
\t overflow: hidden;
\t visibility: hidden;
}
.btn{
\t margin-top: 1px;
\t padding: 3px 5px;
}
.btn-default{
\t background-color: #ec9412;
\t font-family: 'Lato', 'Helvetica', arial, serif;
\t font-size: 87%;
}
.social-media{
\t margin-top: 20px:;
}
p.followus{
\t margin-top: 20px;
\t color: #000;
\t font-weight: bolder;
}
h5.minilist{
\t margin-top: 20px;
\t color: #000;
\t font-weight: bolder;
}
.minifooter li{
\t /*list-style: circle;*/
\t margin: 7px;
\t font-weight: bold;
}
ul {
list-style: none;
}
.minifooter li:before {
content: "+";
margin-right: 4px;
}
.minifooter li a{
\t color: #fff;
\t text-decoration: none;
}
footer .mainfooter ul.minifooter{
\t
\t text-align: left;
\t margin: 0;
\t padding: 0;
}
.minicontact{
\t color: #fff;
\t font-size: 15px;
\t line-height: 105%;
}
#minicontact{
\t color: #e6b016;
}
.miniaddress{
\t margin-top: 20px;
\t float: left;
\t padding: 0 7px 0 0;
\t font-weight: bold;
}
#subfooter{
\t display: inline-block;
\t padding: 20px 0px;
}
footer .subfooter span.minisubfooter{
\t display: block;
\t font-size: 13px;
\t font-weight: bold;
\t float: right;
\t line-height: 25%;
}
/* Media queries entries */
@media screen and (max-width: 991px){
\t footer .col-md-3{
\t \t width:100%;
\t \t display:inline-block;
\t \t text-align:center;
\t \t margin-top:10px;
\t \t \t \t \t \t }
\t footer .col-md-3 .socialmedia{
\t \t float: none;
\t }
\t footer .mainfooter ul.minifooter{
\t \t text-align: center;
\t \t margin: 0;
\t \t padding: 0;
\t }
\t footer .col-md-3 .miniaddress{
\t \t float: none;
\t }
}
/* */<!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">
\t <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-->
\t <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:[email protected]">[email protected]</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-->
\t \t
\t \t
\t \t <!--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-->
\t \t <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-->
\t </div><!-- end of div headermenu-->
\t
\t
<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 & 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:[email protected]" id="minicontact">[email protected]</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 ®</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>
あなたは、画像の欠如、しかし、あなたはこのサイト上のように気にいらを必要とすることができるので、それは、醜いビットhttps://jsfiddle.net/skyr9999/behf2h7t/のために、私はバイオリンを作る - のhttp：//ilanew.spb .ru/??? –
ええと私は、あなたのフィドルに、あなたが提供するリンクサンプルのような、あるいはあなたが提供するような変化は見ません。 –
私が提供しているサイトリンクを調べてみてください。あなたは効果があります。このフィドルにスタイルを追加してください。更新：このサイトのこの効果はワイドモニターでのみ有効です。申し訳ありません。 –