更新

Question

我有一个页面，我的内容，即图像，向下滚动，侧面有固定的标题。我需要在固定div侧面的标题，在图像卷起时进行更改，以描述每个图像。

请参阅http://kimcolemanprojects.com/artworks.html

感谢您就如何实现这一目标提出任何建议。

安吉拉

Answer 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();

<强> Fiddle

<强>更新

为了做得更好，我删除了占位符.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>

<强> Fiddle

更新

我重建你的链接锚并删除了“inline-onclick”-events：

Complete Site - Fiddle

Answer 2

你想要做的是用jQuery观看滚动事件，并在你去的时候检查滚动位置。

以下是一个通用示例：

$(window).scroll(function(){ 
  to_top = $(document).scrollTop();
  if ( $('img').offset().top == to_top ) {
      $('#id-of-title-div').text('text to change to');
  }
});

当内容发生变化时，如何更改固定的文本div？

2 个答案:

更新