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链接：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滚动但不停在屏幕顶部

1 个答案: