Question

我有一个来自全屏英雄部分的中间。当它到达顶部时，它的位置被设置为固定，我有一个简单的脚本添加其他类。就像缩小它的高度和添加背景等......

我想要做的是当它到达＃hero部分的底部时它会隐藏但是当用户向上滚动时显示。

请参阅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;	
   }
     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

您可以这样做：

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

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

}else{

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

}

注意：我还在z-index容器中添加了较高的#grab，并从height:100vh;中删除了hero。

https://jsfiddle.net/u5b514wu/

当它向上滚动顶部和唯一的节目时，Div棒到顶部

1 个答案: