滚动顶部固定格

Question

我想当我向上滚动（这是基于html的网站仅适用于手机）.profiledetails顶部固定和位置顶部20%。但默认的位置将是顶部40%。

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

让我举一个例子的更多细节。默认.profiledetails将从60%高度（vh），然后当我将滚动.profiledetails向上移动，当它将80%高度（vh），那么它将固定。我做了下面的方式

$(document).on("scroll", function() { 
    if ($(document).scrollTop() > 100) { 
    $(".profiledetails").addClass("fixpos"); 
    } else { 
    $(".profiledetails").removeClass("fixpos") 
    } 
}); 

但这是行不通的。我不知道为什么。内容.profiledetails内容也需要内部滚动才能使用。

一个演示

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

样品视频

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

，如果你看到一个视频，然后清楚地了解它是如何滚动，并固定在位置还内置滚动

Answer 1

问题是滚动条“属于”.call-log-area，所以事件监听器应该在它上面。

$('.call-log-area').on("scroll", function() { 
 
    if ($('.call-log-area').scrollTop() > 100) { 
 
    $(".profiledetails").addClass("fixpos"); 
 
    } else { 
 
    $(".profiledetails").removeClass("fixpos") 
 
    } 
 
});

.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% 
 
}

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

http://output.jsbin.com/yazono