如何在内容更改时更改文本的固定 div？

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”事件：

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');
  }
});