HTML CSS仅在正文到达特定点时才修复元素
HTML CSS fixed element only when body reaches a particular point
不确定该方法是什么或它是如何实现的。但我有兴趣了解它,以便在即将到来的项目中使用它。我指的是当块元素位于特定的 X/Y 轴上时,它似乎不再像固定位置元素一样工作,否则该元素充当固定位置元素。
我最常在导航中看到这种情况,其中页眉和页脚很大,当元素到达页眉底部或页脚顶部时,元素将停止充当固定元素
你可以做这样的事情,
$(window).scroll(function(){
if ($(this).scrollTop() > 250){
$('#top').css('position','fixed');
}
else{
$('#top').css('position','static');
}
});
更好的方法是,
$(window).scroll(function(){
var top = $('#top');
if ($(this).scrollTop() > 250){
if(top.css('position') !== 'fixed'){
top.css('position','fixed');
}
}
else{
if(top.css('position') !== 'static'){
top.css('position','static');
}
}
});
有一些插件可以为您执行此操作; 这是我以前使用过的一个:相对成功的链接。也有很好的例子。
但如果你想自己做,这并不难。这个概念有点复杂;如果您将某些内容position
更改为 fixed
,那么它不会像static
那样占用空间。
当我遇到这个问题时,我在同一位置创建了第二个项目(或不创建,取决于您希望它出现的位置),这是不可见的。然后实现一个加载/滚动事件,该事件检查窗口的scrollTop
是否大于非固定对象的top
坐标。如果是,则显示固定对象。
像这样:
$("#yourObject").each(function() { // The ID should be the FIXED object.
var $me = $(this);
var $heightRival = $("#anotherObject"); // This ID should be the non-fixed object.
$me.hide(); // Hide your fixed div.
$(window).bind("load scroll",function() {
var offset = $heightRival.offset(); // Get the document offset of the base object.
var height = $heightRival.outerHeight(); // Get the height of the base object.
if ($(window).scrollTop() > offset.top+height)
$target.show(); // Can be a fade in, slide in, whatever.
else
$target.hide(); // Can be a fade out, etc.
});
});
这只是一个基本的代码,但它应该让你走上正确的轨道。
看看这个插件,或者其他类似的插件:http://www.orangecoat.com/stickyscroll
相关文章:
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 如何使用css动画/javascript使具有背景图像的元素出现
- JQuery-动态创建的元素css不起作用
- 如何使用jquery动态更改DOM元素CSS类
- JS+更改元素CSS+命名锚点
- Javascript获取元素CSS过渡阶段
- 聚合物元素css未显示-检查器中没有错误
- jQuery:获取元素 CSS 值
- 在按钮单击Javascript时添加元素CSS属性后动态更改元素CSS属性
- 中心元素css三维变换
- AngularJS:重置angular.元素CSS改变
- 我想悬停一个元素来影响其他元素css
- 多个存储元素.css()
- 如果窗口调整大小,jQuery将检查元素css属性
- 如何将元素css转换为JSON
- 在长时间执行过程之前和之后使用Jquery更改元素css
- 移除元素css后的::
- jQuery - 有没有办法“保存”dom元素(css)的状态并恢复到保存的状态等
- 渲染图像操作哪个更快:HTML5画布元素,还是操作DOM元素? 'CSS与JS/jQuery
- 如何保存一个网页快照与它的所有元素(css, js,图像,…)到一个文件