如何基于其相对于另一个div的位置更新div

Question

我试图找到最好的方法来更新ID为“ date”的div与滚动过去的div的日期。 我以为可以通过获取数据日期属性来完成此操作，但是我什至在获取滚动到其上的div的ID时也遇到了麻烦。 因此，在这种情况下，日期div的内容应从7月25日开始，然后当id = 2的div通过日期div时，日期div的内容应更改为7月25日，依此类推。

index.html的：

<html>
<head>
<style>

#comments {
float:left;
width:450px;
}

#date {
position: absolute;
top: 0;
margin-top: 20px;
border: 1px solid #A9F5F2;
background-color: #A9F5F2;
color: #6E6E6E;
font-weight: bold;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">    
</script>
<script>
$(document).ready(function() {

$(function () {
$(window).scroll(function (event) {

  var  p =  $('#date').closest('[id]');
  console.log(p); 

});
});
});
</script>
</head>
<body>


<div id="1" data-date="25 July">
comment 1 comment 1 comment 1 comment 1 comment 1 comment 1 <p>
comment 1 comment 1 comment 1 <p>
comment 1 comment 1 comment 1 <p>
</div>

<div id="2" data-date="24 July">
comment 2 comment 2 comment 2 comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
</div>

<div id="3" data-date="23 July">
comment 3 comment 3 comment 3 
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
</div>

<div id="4" data-date="22 July">comment 4 comment 4 comment 4
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4
</div>

<div id="5" data-date="21 July">
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
</div>

<div id="date" style="float:right; position: fixed">
    25 July
</div>

</body>
</html>

Answer 1

您会丢失很多代码，但是我把它们放在一起了-它会检测到一个div何时到达窗口顶部。 希望这对您有所帮助，并且您可以添加所需的其余功能。

https://jsfiddle.net/tobyl/uquj897s/

$(window).scroll(function() {

  var elemPos = $("#3").offset().top - $(window).scrollTop();
  var winPos = $(window).scrollTop();

  if (elemPos < winPos) {
    console.log("element is above window top!");
  } else {
    console.log("element has not yet hit the window top.");
  }
});

Answer 2

好的，我没有完整的解决方案，但这是我为您准备的。

我们可以使用scrollLeft（）和scrollTop（）来确定滚动条的位置（这确定了页面的位置以及我们最接近的日期）。

    $(window).scroll(function (event) {
var left = $(window).scrollLeft();
var top  = $(window).scrollTop();
var IDofElementIamCloseTo = someSuperCoolCalculationFunction(left,top);

  console.log(IDofElementIamCloseTo ); 

});

function someSuperCoolCalculationFunction(left, top){

//somehow determine how far you have moved and what is closer, maybe you can create a list of key //value pairs or make your divs a fixed width/length.  

}

那应该让你感动。

编辑：其他人的答案更好

Answer 3

我为您的日期div添加了一个类，例如

<div class="myDates" id="1" data-date="25 July">

然后

 $(document).ready(function() { function viewPortCheck(el) { function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function givenElementInViewport(el) { return function() { if (isElementInViewport(el)) { let d = el.dataset.date; $('#date').html(d); } }; } if (window.addEventListener) { addEventListener('DOMContentLoaded', givenElementInViewport(el), false); addEventListener('load', givenElementInViewport(el), false); addEventListener('scroll', givenElementInViewport(el), false); addEventListener('resize', givenElementInViewport(el), false); } else if (window.attachEvent) { attachEvent('DOMContentLoaded', givenElementInViewport(el)); attachEvent('load', givenElementInViewport(el)); attachEvent('scroll', givenElementInViewport(el)); attachEvent('resize', givenElementInViewport(el)); } } $(function () { $(window).scroll(function (event) { let elems = $('.myDates'); for(let i = 0; i < elems.length; i++ ){ viewPortCheck(elems[i]); } }); }); });

  #comments { float:left; width:450px; } #date { position: absolute; top: 10px; right:10px; border: 1px solid #A9F5F2; background-color: #A9F5F2; color: #6E6E6E; font-weight: bold; min-width:50px; } .myDates { min-height: 30%; margin: 10% 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="date" style="float:right; position: fixed"> &nbsp; </div> <div class="myDates" id="1" data-date="25 July"> comment 1 comment 1 comment 1 comment 1 comment 1 comment 1 <p> comment 1 comment 1 comment 1 <p> comment 1 comment 1 comment 1 <p> </div> <div class="myDates" id="2" data-date="24 July"> comment 2 comment 2 comment 2 comment 2 comment 2 comment 2 <p> comment 2 comment 2 comment 2 <p> comment 2 comment 2 comment 2 <p> </div> <div class="myDates" id="3" data-date="23 July"> comment 3 comment 3 comment 3 comment 3 comment 3 comment 3 <p> comment 3 comment 3 comment 3 <p> comment 3 comment 3 comment 3 <p> </div> <div class="myDates" id="4" data-date="22 July">comment 4 comment 4 comment 4 comment 4 comment 4 comment 4 <p> comment 4 comment 4 comment 4 <p> comment 4 comment 4 comment 4 </div> <div class="myDates" id="5" data-date="21 July"> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> </div>

Answer 4

由于时间原因我无法完成，但是基于Toby的回答，此代码首次出现了“ divDate”类，并根据其大小和位置更改为下一个，并使用id =“ date”更改了div ...仍然向上滚动时必须要做的事情。 对不起任何不好的英语xD

https://jsfiddle.net/smm7mrqn/

<div class="divDate" id="1" data-date="25 July">
    comment 1 comment 1 comment 1 comment 1 comment 1 comment 1 <p>
    comment 1 comment 1 comment 1 <p>
    comment 1 comment 1 comment 1 <p>
</div>

<div class="divDate" id="2" data-date="24 July">
comment 2 comment 2 comment 2 comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
</div>

<div class="divDate" id="3" data-date="23 July">
comment 3 comment 3 comment 3 
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
</div>

<div class="divDate" id="4" data-date="22 July">comment 4 comment 4 comment 4
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4
</div>

<div class="divDate" id="5" data-date="21 July">
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
</div>

<div id="date" style="float:right; position: fixed">
    25 July
</div>

<script>
var $currDiv = $(".divDate").first();
$(window).scroll(function() {
  var elemPos = $currDiv.offset().top - $(window).scrollTop();
  var elemHeight = $currDiv.css("height");
  var winPos = $(window).scrollTop();

  if (elemPos <= 0) {
    $('#date').html($currDiv.attr("data-date"));
  }
  if((parseInt(elemPos) + parseInt(elemHeight)) <= 0){
    $currDiv = $currDiv.next(".divDate");
  } 
});
</script>

如何基于其相对于另一个div的位置更新div

问题描述

4 个解决方案

解决方案1
2 2016-07-25 22:30:00

解决方案2
0 2016-07-25 22:32:13

解决方案3
0 已采纳 2016-07-25 23:22:48

解决方案4
0 2016-07-25 23:57:51

如何基于其相对于另一个div的位置更新div

问题描述

4 个解决方案

解决方案1 2 2016-07-25 22:30:00

解决方案2 0 2016-07-25 22:32:13

解决方案3 0 已采纳 2016-07-25 23:22:48

解决方案4 0 2016-07-25 23:57:51

解决方案1
2 2016-07-25 22:30:00

解决方案2
0 2016-07-25 22:32:13

解决方案3
0 已采纳 2016-07-25 23:22:48

解决方案4
0 2016-07-25 23:57:51