如何基於其相對於另一個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