1
私はフルスクリーンのヒーローセクションの真ん中にあります。それが上に達するとその位置は固定に設定され、他のクラスを追加する単純なスクリプトがあります。その高さを縮小して背景などを追加するのと同じように...Divは上に上がって上にスクロールして上にスクロールします
私がしたいことは、セクション＃ヒーローの一番下に達してから、ユーザーがスクロールすると非表示になります。
http://www.istockphoto.com/の検索コンテナを参照してください。私のリンク先ページの申し込みフォームで行っている検索コンテナとまったく同じです。
ありがとうございます！
$(function() {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#grab').offset().top;
var Innerwidth = window.innerWidth;
$(window).scroll(function() {
if (Innerwidth >= 767) {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#grab').css({
position: 'fixed',
top: '0',
left: '0',
width: '100%',
background: '#363451',
paddingBottom: '15px'
});
$('form#signUp').css({
marginTop: '15px'
});
$('form#signUp input').css({
height: '45px',
fontSize: '14px'
});
$('form#signUp button').css({
height: '45px'
});
} else {
$('#grab').css({
position: 'relative',
background: 'none'
});
$('form#signUp').css({
marginTop: '25px'
});
$('form#signUp input').css({
height: '65px',
fontSize: '16px'
});
$('form#signUp button').css({
height: '65px'
});
}
}
});
}); h1 {
margin-top: 100px;
text-align: center;
color: #363451;
font-size: 45px;
font-weight: 900;
}
h2 {
text-align: center;
color: #363451;
}
h3 {
text-align: center;
font-weight: 300;
margin-top: 0px;
color: #363451;
}
h4 {
font-size: 22px;
font-weight: 300;
margin-top: 0px;
color: #363451;
}
p {
color: #363451;
padding: 25px;
font-size: 16px;
}
.p-text {
padding: 25px 0px !important;
line-height: 1.8em;
width: 80%;
}
.p-text-2 {
padding: 0px !important;
font-size: 18px;
}
.text-white {
color: #ffffff !important;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.pad-master {
padding: 10px 0;
}
.header-text {
width: 55%;
margin: 25px auto;
text-align: left;
}
.subheader-text {
width: 45%;
margin: 15px auto 50px auto;
padding: 0;
text-align: center;
}
.header-bkg {
padding: 10px 10px;
background-color: #363451;
width: 295px;
}
.header-bkg-2 {
padding: 10px 10px;
background-color: #363451;
width: 440px;
}
.mainNavMenu {
color: #363451;
text-decoration: none;
cursor: pointer;
padding-bottom: 2px;
border-bottom: 2px solid rgba(0,0,0,0);
transition: all 0.1s ease-in-out;
}
.mainNavMenu:hover {
text-decoration: none;
border-bottom: 2px solid #f630a5;
}
.mainFooterMenu {
color: #fff;
text-decoration: none;
cursor: pointer;
padding-bottom: 2px;
border-bottom: 2px solid rgba(0,0,0,0);
transition: all 0.1s ease-in-out;
}
.mainFooterMenu:hover {
color: #fff;
text-decoration: none;
border-bottom: 2px solid #f630a5;
}
.no-padding {
padding: 0px !important;
margin: 0px !important; \t
}
section#hero {
width: 100vw;
height: 100vh;
background-size: cover;
background: url(../img/mainNavHero-fs.jpg) no-repeat top center;
background-attachment: fixed;
}
#signUpContainer {
width: 100%;
}
form#signUp {
position: relative;
margin-top: 25px;
z-index: 99;
}
form#signUp input {
height: 65px;
padding-left: 10px;
font-size: 16px;
}
form#signUp input.name {
width: 100%;
vertical-align: bottom;
border-top: none;
border-bottom: none;
border-left: none;
border-right: 0.5px solid #f2f2f2;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
transition: all 0.2s ease;
}
form#signUp input.email {
width: 100%;
vertical-align: bottom;
border-top: none;
border-bottom: none;
border-left: 0.5px solid #f2f2f2;
border-right: none;
transition: all 0.2s ease;
}
form#signUp button {
width: 100%;
height: 65px;
padding-bottom: 5px;
background: #f630a5;
border: none;
color: #ffffff;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.2s ease;
}
input::-webkit-input-placeholder {
transition: all 0.1s ease-in-out;
}
form#signUp input:focus, form#signUp input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
form#signUp input:focus::-webkit-input-placeholder, form#signUp input:valid::-webkit-input-placeholder {
color: #db3095;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
form#signUp button:hover {
background: #db3095;
}
.btnContainer {
position: relative;
margin-top: 45px;
}
.btnContainer2 {
margin-top: 45px;
}
a.primaryBtn {
padding: 15px 25px;
border-radius: 25px;
text-decoration: none;
color: #363451;
border: 2px solid #f630a5;
transition: all 0.2s ease-in-out;
}
a.primaryBtn:hover {
background-color: #f630a5;
border: 2px solid #f630a5;
color: #ffffff;
}
a.scrollBtn {
padding: 15px 25px;
border-radius: 25px;
text-decoration: none;
color: #363451;
border: 2px solid #f630a5;
transition: all 0.2s ease-in-out;
}
a.scrollBtn:hover {
background-color: #f630a5;
border: 2px solid #f630a5;
color: #ffffff;
}
.infoContainer {
background: #363451;
padding: 25px 0px;
margin-top: -50px;
border-radius: 5px;
box-shadow: 8px 8px 20px rgba(0,0,0,0.2);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="hero">
<div class="container-fluid">
<div class="row no-padding">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<h1>HEADER<br>HEADER HEADER.</h1>
<p class="subheader-text">Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff</p>
<h3 class="header-text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</h3>
</div>
</div>
</div>
<div id="grab" class="nav-down">
<div class="container">
<div class="row">
<div id="signUpContainer">
<div class="col-md-8 col-md-offset-2 padding-toggle">
<form id="signUp">
<center>
<div class="col-sm-3 no-padding">
<input id="name" class="name" type="text" name="name" placeholder="Name..." required/>
</div>
<div class="col-sm-7 no-padding">
<input id="email" class="email" type="text" name="email" placeholder="Email..." required/>
</div>
<div class="col-sm-2 no-padding">
<button>Sign Up</button>
</div>
</center>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 padding-toggle">
<center>
<div class="btnContainer">
<a href="#" class="primaryBtn">Button</a>
</div>
</center>
</div>
</div>
</div>
</section>
<section style="width:100vw;height:100vh;"></section>
あなたのコードのいくつかのスタイリングは大いに役立つだろう:) – TheYaXxE
申し訳ありませんが、私はCSSの一部を追加しました。どんな助けでも大歓迎です！ – user7410323