0

画像であるコンテンツが下にスクロールし、横に固定タイトルが付いているページがあります。固定divである側のタイトルは、画像がロールアップするにつれて変更され、各画像を説明する必要があります。

http://kimcolemanprojects.com/artworks.htmlを参照してください

これを達成する方法についてのアドバイスをありがとう。

アンジェラ

4

2 に答える 2

1

数週間前に簡単なjQuery式を作成したので、要件に合った簡単なソリューションを次に示します...

jQuery式

jQuery.expr.filters.inView = function(el) {
    var width = $(el).width(),
        height = $(el).height(),
        offset = $(el).offset(),

        vp_dimensions = {
            height: $(window).height(),
            width: $(window).width()
        },
        y_offset = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
        x_offset = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

    return (
    offset.top < (y_offset + vp_dimensions.height) && offset.left < (x_offset + vp_dimensions.width) && (offset.top + height) > y_offset && (offset.left + width) > x_offset);
};

スクロールイベント

$(window).scroll(function() {

    $('li').each(function() {
        var self = $(this),
            title = self.prev('.title').text();
        if (self.is(':inView')) {
            $('#title').find('h2').text(title);
        }
    });

}).scroll();

フィドル

アップデート

これをもう少しうまく行うために、プレースホルダーを削除し、.titleその内容をimg-alt属性に追加しました。

$(window).scroll(function() {

    $('li').each(function() {
        var self = $(this),
            title = self.find('img').attr('alt');
        if (self.is(':inView')) {
            $('#title').find('h2').text(title);
        }
    });

}).scroll();

そしてあなたの新しいHTML：

<div id="header">
    <div id="title">
        <h2>Untitled 1</h2>
    </div>
</div>
<div id="main" class="main">
    <ul>
        <li id="1">
            <a onClick="goToByScroll('2')" href="javascript:void(0)"><img src="Untitled17.jpg" alt="Unititled 1"></a>
        </li>
        <li id="2">
            <a onClick="goToByScroll('3')" href="javascript:void(0)"><img src="Untitled9.jpg" alt="Unititled 2"></a>
        </li>
        <li id="3">
            <a onClick="goToByScroll('4')" href="javascript:void(0)"><img src="Frame2.jpg" alt="Unititled 3"></a>
        </li>
        <li id="4">
            <a onClick="goToByScroll('1')" href="javascript:void(0)"><img src="Untitled2.jpg" alt="Unititled 4"></a>
        </li>
    </ul>
</div>

フィドル

アップデート

リンクアンカーを再構築し、「inline-onclick」イベントを削除しました。

完全なサイト-フィドル

于 2012-12-17T16:59:35.723 に答える
0

jQueryを使用してスクロールイベントを監視し、スクロール位置を確認します。

一般的な例を次に示します。

$(window).scroll(function(){ 
  to_top = $(document).scrollTop();
  if ( $('img').offset().top == to_top ) {
      $('#id-of-title-div').text('text to change to');
  }
});
于 2012-12-17T16:47:17.477 に答える