Silly Question Boy Silly Question Boy - 4 months ago 8
jQuery Question

How to update a div based on it's position relative to another div

I am trying to find the best way to update the div with id "date" with the dates of the divs that are scrolled past. I thought this may be done through getting the data-date attributes however I was even having trouble obtaining the ids of the divs which are scrolled past. So in this case the content of the date div, should start out as 25 July and then as the div with id=2 passes the date div, the content of the date div should change to 25 July and so on.

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

I've added a class to your date divs, such as

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

then

$(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>