根据可滚动内容的样式改变元素样式
Changing element style depending on the style of scrollable content
新手需要帮助。我有一个列表元素内可滚动的div(小滚动条)与不同的背景颜色:红色和蓝色。另外,我有两个方形div的红色和蓝色的背景色。
待办事项:当列表滚动到第一个蓝色元素时,为蓝色的正方形div添加类border
示例:http://jsfiddle.net/uy4hK/19/
我想应该有一个类似于不同颜色的列表元素的位置触发器。需要帮助!
你可以自定义插件来支持滚动事件。修改whell
和drag
函数如下:
function wheel(oEvent) {
if (!(oContent.ratio >= 1)) {
oEvent = $.event.fix(oEvent || window.event);
var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3;
iScroll -= iDelta * options.wheel;
iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
oContent.obj.css(sDirection, -iScroll);
oEvent.preventDefault();
// New code
if (options.onScroll && typeof (options.onScroll) == "function") {
options.onScroll.call(this);
}
};
};
function drag(oEvent) {
if (!(oContent.ratio >= 1)) {
iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
iScroll = iPosition.now * oScrollbar.ratio;
oContent.obj.css(sDirection, -iScroll);
oThumb.obj.css(sDirection, iPosition.now);
// New code
if (options.onScroll && typeof (options.onScroll) == "function") {
options.onScroll.call(this);
}
}
return false;
};
然后你可以传递一个自定义函数,它将在滚动时执行:
$(function () {
var fisrtBlueOffset = $(".overview li.blue:first").offset().top;
var viewportHeight = $(".viewport").height();
$('#scrollbar1').tinyscrollbar({
"onScroll": function () {
var viewportTop = parseInt($(".overview").css("top"));
if (fisrtBlueOffset + viewportTop < viewportHeight) {
$(".blue-block").css("border", "1px solid #000");
}
else {
$(".blue-block").css("border", "");
}
}
});
});
相关文章:
- 为什么当我分配给element.style时,我的元素的样式没有改变
- 钛:平台检测并相应地改变界面样式
- CSS:根据屏幕宽度改变样式
- Onload Javascript不会改变DIV样式
- 检测元素.Javascript会改变样式
- windows 8应用程序CSS列表视图改变内联样式
- 用javascript改变css样式
- 如何动态改变jquery日期选择器样式
- 改变JavaScript对象定义样式会导致画布保持空白
- 如何在改变窗口宽度时重新加载css样式?
- 如何调用函数一旦dom元素的样式改变Javascript/jquery
- 用javascript改变CSS样式
- 剑道UI图表-改变标记样式
- 如何改变按钮的样式
- 我如何改变我的菜单样式点击
- 如何改变光标样式时,鼠标悬停在谷歌图表API与Javascript
- 根据可滚动内容的样式改变元素样式
- 如何根据另一个元素的样式改变HTML元素的样式
- AngularUI弹出窗口样式改变父元素点击
- 如果只是样式改变了,阻止JS块的再生