Div Sticks nach oben, wenn es oben erreicht und nur auf Bildlauf nach oben

Question

Ich habe eine von in der Mitte des Vollbild-Helden Abschnitt. Wenn es oben ankommt, wird seine Position auf "fixed" gesetzt und ich habe ein einfaches Skript, das andere Klassen hinzufügt. Wie schrumpfen seine Höhe und Hinzufügen eines Hintergrunds usw.

Was ich tun möchte ist, wenn es den unteren Rand des Abschnitts # Held erreicht es verbirgt sich aber zeigt, wenn der Benutzer scrollt nach oben.

Bitte beziehen Sie sich auf http://www.istockphoto.com/ ihre Suche Container macht genau das, was ich mit meinem Anmeldeformular für meine Landingpage tun möchte.

Vielen Dank im Voraus!

Heres der Abschnitt, der das Formular enthält:

$(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>

Answer 1

Sie können etwas tun:

if($(window).scrollTop() + $(window).height() == $(document).height()) { 

    $('#grab').slideUp(); 

}else{ 

    $('#grab').slideDown(); 

} 

Hinweis: Ich habe auch eine höhere z-index zu Ihrem #grab Behälter und entfernte die height:100vh; von hero.

https://jsfiddle.net/u5b514wu/