Question

我想在滚动到视图时根据当前div的数据attr不断更新h5标签文本。设置CSS时.bar类占用100％的高度，并且一次只能看到一个。我能够将第一个图像标题传递给h5标记，但是当新的.bar div滚动到视图中时它不会更新。

HTML

<div id="foo">
    <div class="bar" >
        <img class="image" id="i_003" data-title="title_3" src="path/here_3.jpg">
    </div>

    <div class="bar" >
        <img class="image" id="i_002" data-title="title_2" src="path/here_2.jpg">
    </div>

    <div class="bar" >
        <img class="image" id="i_001" data-title="title_1" src="path/here_1.jpg">
    </div>  
</div>

<div id="img_info">
    <h5 id="title">title here</h5>
</div>

的jQuery

$('#foo').scroll(function() {
    var imgTitle = $('.image').attr('data-title');

    $("#title").text(imgTitle);

    console.log("imgTitle: " + imgTitle);
}

感谢您的帮助！

Answer 1

JSFiddle

获取容器中每个.bar在变量（如数组）中的位置。在滚动容器时对容器的scrollTop位置进行分析，并将其值与变量的最高值进行比较。当scrollTop值介于其中一个.bar之后，然后应用其图像数据标题值。

（因为你没有提供CSS我做了一些快速的，我希望它符合你的情况）

＆＃13;

var $foo = $('#foo'),
  $title = $('#title'),
  $bar = $('div.bar'),
  $img = $bar.find('img.image');

img_top = [$img.eq(0).offset().top, $img.eq(1).offset().top, $img.eq(2).offset().top];

$foo.on('scroll', function(e) {

  var scrolltop = $foo.scrollTop();

  if (scrolltop > img_top[2]) {
    $title.text($img.eq(2).data('title'));
  } else if (scrolltop > img_top[1]) {
    $title.text($img.eq(1).data('title'));
  } else if (scrolltop > img_top[0]) {
    $title.text($img.eq(0).data('title'));
  } else if (scrolltop < img_top[0]) {
    $title.text('this could be the default?');
  }

});

＆＃13;

.bar {
  margin-bottom: 100px;
  height: 100vh;
  border: 1px solid black;
}

#img_info {
  position: fixed;
  top: 0;
  left: 0;
}

#foo {
  overflow: auto;
  height: 100vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <div class="bar">
    <img class="image" id="i_003" data-title="title_3" src="path/here_3.jpg">
  </div>

  <div class="bar">
    <img class="image" id="i_002" data-title="title_2" src="path/here_2.jpg">
  </div>

  <div class="bar">
    <img class="image" id="i_001" data-title="title_1" src="path/here_1.jpg">
  </div>
</div>

<div id="img_info">
  <h5 id="title">title here</h5>
</div>

＆＃13;

当滚动到视图中时，基于新div的数据attr连续更新h5标签文本

1 个答案: