Jquery 如何使文本的固定div随着内容的变化而变化？

我有一个页面，其中我的内容是图像，向下滚动，并在侧面有一个固定的标题。我需要在一边的标题，这是一个固定的div，改变图像滚动，以描述每个图像

请看

感谢您对如何实现这一目标的任何建议

---

angela

您要做的是使用jQuery观看滚动事件，并在运行时检查滚动位置

以下是一个通用示例：

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

---

几周前我写了一个简单的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);
};

更新

为了做得更好，我删除了您的占位符

.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>

无标题1

更新 我已重建链接锚并删除“内联onclick”-事件：

---

-

请编辑您的问题，并添加一个小的（尽可能）示例来演示该问题，好吗？这样我们就更容易帮助你了，当你解决了你网站上的问题（或链接更改）时，这个问题对未来的访问者仍然有用。此外，了解到目前为止您已经尝试了什么也会有所帮助。我已经使用了该代码并完成了此操作，但它不能正常工作，我做错了什么$（窗口）.scroll（函数（）{to#top=$（文档）.scrollTop（）；if（$（'#1'）.offset（）.top=to#top）{$（'#title'）。text（'photogram1'）；}）$（窗口）.scroll（函数（）{to#top=$（文档）.scrollTop（）；if（$（'#2'）.offset（）.top=to#top）{$（'#title'）.text（'photogram2'）；}）；ect？？首先在

$（窗口）中执行所有操作。滚动
事件。你不想要这些的倍数。您将只有多个if语句或if-else语句。你也可以给我们一个开关语句，只是现在尝试一下，但它似乎停止了我的点击滚动脚本的工作？这是因为jquery版本吗？对此，我必须说，
ID
或
class
不能以数字开头。。。给他们一个这样的id：
，
等等。好的，谢谢你的建议，但是我仍然需要我的图像在单击时滚动到顶部以及更改标题。这可能吗？谢谢你time@user1566289你能进一步解释一下吗？函数goToByScroll（id）{$（'html，body'）。动画（{scrollTop:$（“#”+id）.offset（）.top}，'slow'）；}当你点击一个图像时，它应该向上滚动到页面上的下一个图像，因此，它是一个长长的图像页面，您可以通过单击每个图像查看下一个图像，然后向上滚动到视图中。上面的代码正在做什么。
<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>