[英]How do I make a fixed div of text change as content changes?
I have a page where my content, which are images, scrolls down and has a fixed title on the side. 我有一个页面,其内容(图像)向下滚动并在侧面具有固定的标题。 I require the title on the side which is a fixed div, to change as the images roll up, to describe each image.
我需要在固定div一侧的标题随着图像汇总而变化,以描述每个图像。
Please see http://kimcolemanprojects.com/artworks.html 请参阅http://kimcolemanprojects.com/artworks.html
thanks for any advice on how to achieve this. 感谢您提供有关如何实现此目标的建议。
angela 安吉拉
I've written some weeks ago a simple jQuery expression, so here's a simple solution that fits to your requirements... 我几周前已经写了一个简单的jQuery表达式,所以这是一个适合您需求的简单解决方案...
jQuery expression 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);
};
Scroll Event 滚动事件
$(window).scroll(function() {
$('li').each(function() {
var self = $(this),
title = self.prev('.title').text();
if (self.is(':inView')) {
$('#title').find('h2').text(title);
}
});
}).scroll();
Update 更新资料
To do it a bit nicer I've removed your placeholder .title
's and added its contents to your img-alt attributes: 为了做得更好,我删除了占位符
.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();
And your new HTML: 而您的新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>
I've rebuild your link anchors and removed the "inline-onclick"-events: 我重建了您的链接锚,并删除了“ inline-onclick”事件:
Complete Site - Fiddle 完整网站 - 小提琴
What you will want to do is watch the scroll event with jQuery and check the scroll position as you go. 您要做的是使用jQuery观看滚动事件,并在滚动时检查滚动位置。
Here is a generic example: 这是一个通用示例:
$(window).scroll(function(){
to_top = $(document).scrollTop();
if ( $('img').offset().top == to_top ) {
$('#id-of-title-div').text('text to change to');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.