在滚动顶部固定div

时间：2016-03-09 07:58:18

标签： jquery html css

我希望在向上滚动时（这是仅适用于移动设备的基于html的网站）.profiledetails顶部固定且位置顶部20%。但默认位置将是最高40%。

如果你们看到MIUI个人资料部分，那么更容易理解。

让我举例说明更多细节。默认情况下，.profiledetails从{6}高度（60%）从底部开始向下滚动vh向上移动，当它.profiledetails高度（{{1}然后它会修复。我的确吼了一下

80%

但这不起作用。我不知道为什么。内部vh内容也需要内部滚动。

一个演示

https://jsfiddle.net/cyber007/pdj82aty/

示例视频

https://www.youtube.com/watch?v=df8sIJ7mHRQ

如果您看到该视频，那么请清楚地了解它如何滚动并修复位置也是内部滚动

enter image description here

1 个答案:

答案 0 :(得分：0)

问题是卷轴＆＃34;属于＆＃34;到.call-log-area所以事件监听器应该在它上面。

＆＃13;
＆＃13; 
$('.call-log-area').on("scroll", function() {
  if ($('.call-log-area').scrollTop() > 100) {
    $(".profiledetails").addClass("fixpos");
  } else {
    $(".profiledetails").removeClass("fixpos")
  }
});
＆＃13; 
.conpropic {
  float: left;
  width: 70%;
  line-height: 0%;
  position: relative;
}
.conpropic img {
  border-radius: 100px;
  line-height: 0%;
  width: 45px;
}
.conmeta {
  float: right;
  width: calc(100% - 50px);
  padding: 6px 0px 4% 0px;
  line-height: normal;
}
.coninfo {
  float: left;
  font-size: 16px;
}
.callicon {
  float: right;
  text-align: center;
  width: 30%;
  margin-top: 8px;
}
.callicon a {
  position: relative;
  width: 50%;
  text-align: center;
  float: left;
}
.callicon .notifybox {
  top: -3px;
  right: 25px;
  color: #fff;
}
.callicon img {
  -webkit-filter: invert(1);
  filter: invert(1);
}
a.invitebtn {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  background-color: #5C6BC0;
  color: #fff;
  padding: 4px 5px 3px 5px;
  border-radius: 3px;
  float: left;
  margin-top: 5px;
}
.contactrow {
  line-height: 100%;
  padding: 4% 2% 2% 2%;
  border-bottom: solid 1px rgba(0, 0, 0, 0.11);
}
.coninfo em {
  float: left;
  font-size: 11px;
  margin-top: 5px;
  font-style: inherit;
  color: #A2A2A2;
}
/****** fullscreen ***********/

.bigprofilepic {
  float: left;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  opacity: 0.2;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}
.callingscreen {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 5%;
  text-align: center;
}
/******* profile ************/

.profilepic {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  opacity: 0.8;
}
.overlaycontent {
  width: 100%;
  height: 100vh;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
}
.profile-action {
  color: #fff;
  padding: 10px 5px;
  position: fixed;
  top: 0;
}
.profile-name {
  font-size: 2rem;
  line-height: 100%;
}
.profile-name strong {
  font-weight: normal
}
.profile-name em {
  font-weight: normal;
  font-size: 12px;
  font-style: normal
}
.backicon {
  float: left;
  margin-right: 10px;
  line-height: 0;
}
.profiledetails h2 {
  font-size: 1.8rem;
  margin: 0;
}
.fixpos {
  height: 80% !important;
}
.profiledetails h3 {
  font-size: 16px;
  margin: 10px 0 0 0;
  letter-spacing: normal;
  border-top: solid 1px #D2D2D2;
  padding-top: 10px;
}
.user-info {
  padding: 2.5%;
  background-color: #FFFFFF;
}
.user-info span {
  font-size: 18px;
}
.call-log-area {
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 43px;
}
.call-log-area .conmeta {
  margin: 0;
  padding: 0
}
.call-log-area .contactrow {
  padding: 3% 2% 3% 2%;
}
.call-log-area .contactrow strong {
  font-weight: normal;
  font-size: 90%;
  display: block
}
.call-log-area .contactrow .coninfo em {
  margin: 0
}
.contactlist {
  float: left;
  width: 100%;
  margin-bottom: 42px;
}
.contentarea {
  margin-top: 40px;
  padding: 0 10px;
}
.profiledetails {
  float: left;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.93);
  color: #2B2B2B;
  position: fixed;
  height: 70%;
  bottom: 0;
}
.top-space {
  display: block;
  height: 40%
}
＆＃13; 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="profilepic" style="background-image:url(http://lorempixel.com/image_output/fashion-q-c-640-480-8.jpg)"></div>
<div class="overlaycontent">
  <div class="section profile-action">
    <div class="container">
      <div class="backicon"><img src="images/icon-back.png" alt=""></div>
      <div class="profile-name"><strong>User Name</strong>
        <em>User ID :  10000000158</em>
      </div>
    </div>
  </div>
  <div class="top-space"></div>
  <div class="profiledetails">
    <div class="user-info">
      <span>Call Logs</span>
      <!--<h2>User ID :  10000000158</h2><h3>Feeling Great !</h3>-->
    </div>
    <div class="call-log-area">
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
      <div class="section contactrow">
        <div class="conpropic">
          <img src="dummy-user/01.jpg" alt="">
          <div class="conmeta">
            <div class="coninfo">Last Div Cheryl Rowe
              <strong>+6012547557</strong> <em>08/03/2016  17:48 (5)</em> 
            </div>
          </div>
        </div>
        <div class="callicon">
          <a href="chat.html"><img src="images/icon-message-2.png" alt=""></a>
          <a href="outgoing.html"><img src="images/icon-call-2.png" alt=""></a>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

http://output.jsbin.com/yazono

相关问题
最新问题