Question

我有一个HTML文档，其中包含相同类的多个外部和内部div。我还有一个JQuery函数，它使内部div向下滚动页面。但是，我只能使用函数来处理第一个内部div元素，而不是任何其他元素。这是我的HTML：

<div class='parent'>    
    <div class='child'>
      Val1
    </div>
</div>
<div class='parent'>    
    <div class='child'>
      Val2
    </div>
</div>
<div class='parent'>    
    <div class='child'>
      Val3
    </div>
</div>

我的CSS：

    .child {
    background:#ace;
    text-align: center;
    line-height: 40px;
    width:100px;
    height: 40px;
    position:absolute; top:0; left:0;
}

.parent {
  position:relative;
  background: gray;
  margin-bottom: 1px;
  width: 100px;
  height: 1000px;
}

body{
  height: 10000px;
}

我的JQuery：

var parent = $('.parent');
var child = $('.child');
var pheight = parent.height();
var cheight = child.height();


$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(window);

    $window.scroll(function(e){
        if (((child.position().top + cheight) >= pheight) && ($window.scrollTop() >= (pheight + cheight))){
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('.child').followTo(pheight - cheight);

这是一个JSFiddle：http://jsfiddle.net/Tgm6Y/11879/

基本上我想要每一个＆＃34; Val1＆＃34;，＆＃34; Val2＆＃34;和＆＃34; Val3＆＃34; div以向下滚动页面的方式＆＃34; Val1＆＃34;目前确实如此，但我不确定在JQuery中执行此操作的正确方法是什么。

Answer 1

您使用的是child.position().top，但child是元素的集合。
相反，您更愿意检查每个元素的位置。

这是一种略微不同且更简单的方法：

var $parent = $(".parent").each(function() {
    this._child = $(this).find(".child");
});

function fixpos() {
  $parent.each(function(){
    var br = this.getBoundingClientRect();
    $(this._child).toggleClass("sticky", br.top<0 && br.bottom>0);
  });
}

fixpos();
$(window).on("load scroll", fixpos);

/*QuickReset*/ *{box-sizing: border-box;margin:0;}html,body{height:100%;font:16px/1 sans-serif;}

.parent {
  position: relative;
  background: gray;
  margin-bottom: 1px;
  height: 1000px;
  padding-top: 40px; /* ADD THIS - Height of heading */
}

.child {
  background: #ace;
  text-align: center;
  line-height: 40px;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}

.child.sticky { /* ADD THIS */
  position: fixed;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div class='parent'>
  <div class='child'>Val1</div>1
</div>
<div class='parent'>
  <div class='child'>Val2</div>2
</div>
<div class='parent'>
  <div class='child'>Val3</div>3
</div>

如何将多个div相互链接并同时滚动它们？

1 个答案: