Question

我有以下代码将id为“DTE”的div更新为divs中带有“date”类滚动过去的日期。它向下滚动时工作，但我希望它以略微不同的方式向上滚动。因此，例如，一旦“2016年12月3日”按照预期滚动到DTE更新到2016年12月3日，但是我希望当页面向上滚动，因为DTE相对于顶部比“2016年12月3日”更高，因为DTE是在这种情况下更新到上一个日期“2016年12月2日”。我不想等到滚动到2016年12月2日的敌人DTE更新。所以在该地区的任何地方都有与DTE将在当天反映的日期相关的文字。我可能错过了一些明显的东西

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $(window).trigger('scroll');

        $(window).on("scroll resize", function(){

          var pos=$('#DTE').offset();
          $('.date').each(function() {
            if (pos.top >= $(this).offset().top &&
                pos.top <= $(this).next().offset().top) {
              $('#DTE').html($(this).attr("date"));
              return; 
            } 
          });
        });
      });   
    </script>
  </head>
  <body>
    <div id="DTE" style="position: fixed; height:15px; font-size:70%; border-radius: 3px; background-color:lightcyan; text-align:center; width:11.8%; margin-left:34.55%; color:black"></div>
    <p>   
    <div class="date" date="02 Dec 2016" style="height:15px; font-size:70%; background-color:#2E64FE; text-align:center; width:15%; margin-left:44%; color:white">02 Dec 2016</div>
    <p style="height: 100px; margin-left: 44%">Text related to 02 Dec 2016</p> 
    <br/>
    <p style="height: 50px; margin-left: 44%">More text related to 02 Dec 2016</p>
    <br/>
    <div class="date" date="03 Dec 2016" style="height:15px; font-size:70%; background-color:#2E64FE; text-align:center; width:15%; margin-left:44%; color:white">03 Dec 2016</div>
    <p style="height: 100px; margin-left: 44%">Text related to 03 Dec 2016</p> 
    <br/>
    <p style="height: 50px; margin-left: 44%">More text related to 03 Dec 2016</p>
    <br/> 
    <div class="date" date="04 Dec 2016" style="height:15px; font-size:70%; background-color:#2E64FE; text-align:center; width:15%; margin-left:44%; color:white">04 Dec 2016</div>
    <p style="height: 100px; margin-left: 44%">Text related to 04 Dec 2016</p> 
    <br/>
    <p style="height: 50px; margin-left: 44%">More text related to 04 Dec 2016</p>
    <br/>   
    <div class="date" date="05 Dec 2016" style="height:15px; font-size:70%; background-color:#2E64FE; text-align:center; width:15%; margin-left:44%; color:white">05 Dec 2016</div>
    <p style="height: 100px; margin-left: 44%">Text related to 05 Dec 2016</p> 
    <br/>
    <p style="height: 500px; margin-left: 44%">More text related to 05 Dec 2016</p> 
    <br/>
  </body>
</html>

Answer 1

您可以使用jQuery's nextUntil()和401。

class="date"

<script type="text/javascript">
  $(document).ready(function() {
    $(window).trigger('scroll');

    $(window).on("scroll resize", function(){
      var pos = $('#DTE').offset();

      $('#DTE2').html(pos.top);

      $('.date').each(function() {

        // you need the next class="date"
        // so go next UNTIL you reach it
        var nxt = $(this).nextUntil('.date');

        // then get the "next" element's pos.top which will be the date
        var nextpostop = nxt.next().offset().top;

        if (pos.top >= $(this).offset().top &&
            pos.top <= nextpostop) {
          $('#DTE').html($(this).attr("date"));
          return;
        }
      });
    });
  });
</script>

      $(document).ready(function() {
        $(window).trigger('scroll');

        $(window).on("scroll resize", function(){
          var pos = $('#DTE').offset();

          $('#DTE2').html(pos.top);

          $('.date').each(function() {

            // you need the next class="date"
            // so go next UNTIL you reach it
            var nxt = $(this).nextUntil('.date');

            // then get the "next" element's pos.top which will be the date
            var nextposbot = nxt.next().offset().top + nxt.next().height();

            if (pos.top >= $(this).offset().top &&
                pos.top <= nextposbot) {
              $('#DTE').html($(this).attr("date"));
              return;
            }
          });
        });
      });

向上滚动更新div

1 个答案: