Question

我正在尝试找到更新id为“date”的div的最佳方法，其中div的日期滚动过去。我认为这可以通过获取data-date属性来完成，但是我甚至无法获得滚动过去的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的位置更新div

4 个答案: