为什么replaceWith()不像css()那样触发?
Why does replaceWith() not trigger the same way as css()?
我试图触发一个固定的div的内容的变化,当你滚动过图像的顶部。
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var img_position = $('img').position();
if(y_scroll_pos > img_position.top) {
$(".fixed").replaceWith(
"<p>Goodbye!</p>"
);
}
else {
$(".fixed").replaceWith(
"<p>Hello!</p>"
);
}
[...]
这只适用于当你的窗口在加载时滚动到该点或以下,即使窗口。很明显,pageYOffset会随着滚动而不断变化。
但是这个例子,使用css(),它应该改变。
if(y_scroll_pos > img_position.top) {
$(".fixed").css(
"background-color","red";
);
}
else {
$(".fixed").css(
"background-color","yellow";
);
}
[...]
为什么?这两种方法有什么区别?
当您只能更改所需的内容时,为什么要更改整个HTML ?
jQuery(function( $ ){ // (DOM is now ready)
var $img = $('img'); // Cache your elements outside of expensive
var $fixedP = $('.fixed').find("p"); // scroll events
$(window).scroll(function() {
var pastTop = window.pageYOffset > $img.position(); // Boolean value
$fixedP.text(pastTop ? "Goodbye!" : "Hello!" )
.css({background: pastTop ? "red" : "yellow"});
}
});
相关文章:
- CSS-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- css(或jQuery)悬停时淡入淡出
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 如何使用css动画/javascript使具有背景图像的元素出现
- 获取HTML属性中CSS声明的值
- 当我更改Joomla时,它仍然从旧域加载CSS和Javascript
- 如何使用css动画从中心增加边界线
- 在使用 replaceWith() 后无法在 jQuery 中设置 CSS 和单击处理程序
- 为什么replaceWith()不像css()那样触发?