Div 滚动但不停在屏幕顶部

Question

我一直在努力设置一个简单的操作，当页面很长时，div 从屏幕中央开始，当用户向下滚动屏幕时，div 与其余内容一起移动，但停在顶部，而其余内容可以继续。

我已经设法（通过这里和搜索得到很多帮助）达到 div 滚动的程度，但它不会停在屏幕顶部并随着剩下的内容。

在过去的几个小时里，我一直在摆弄不同的位，但现在我只是超出了我目前的理解范围，只是不知道我哪里出错了。任何帮助将不胜感激。

我用的js是：

var StickyElement = function(node){
var doc = $(document), 
  fixed = false,
  content = node.find('#logo');

var onScroll = function(e){
var docTop = doc.scrollTop(),
    anchorTop = anchor.offset().top;

console.log('scroll', docTop, anchorTop);
if(docTop > anchorTop){
  if(!fixed){
    anchor.height(content.outerHeight());
    content.addClass('stuck');        
    fixed = true;
  }
}  else   {
  if(fixed){
    anchor.height(0);
    content.removeClass('stuck'); 
    fixed = false;
  }
}
};

  $(window).on('scroll', onScroll);
};

codepen link: http://codepen.io/anon/pen/embvRL

Answer 1

这样的事情对你有用吗？

fiddle

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    height: 100%;
    width: 100%;
}

* {
    padding: 0;
    margin: 0;
}

.main {
    position:relative;
    z-index: 5;
}

.main p {
   margin-bottom: 16px;
}

.centered_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(50%);
    transform: translateY(-50%);
    width: 240px;
    line-height: 60px;
    text-align:center;
    font-size: 60px;
    z-index: 10;
    margin: 0 0 0 -120px;
}

.fixedPos {
    position:fixed !important;  
    top: 0;
    transform: translateY(0);

}

</style>
</head>
<body>

<div class="centered_text">
    centered
</div>    
<div class="main">
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">
var originalLogoPosition = $('.centered_text').offset().top;

$(window).scroll(function () {
    var logo = $('.centered_text');
    var pos = logo.offset();
    var posScrollTop = pos.top;   

    if ($(this).scrollTop() > posScrollTop) {
     logo.addClass('fixedPos');   
    } else if ($(this).scrollTop() < originalLogoPosition) {
     logo.removeClass('fixedPos');     
    }
});
</script>

</body>
</html>

Div 滚动但不停在屏幕顶部

Div scrolling but not stopping at the top of the screen

jquery

html

css

scroll

fixed