Axiu Blog
滚动的。测试了一下效果还不错(当然IE6去死)。 很久没写过代码分享文章了。这里先说一下方法:获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。这里借 zww 大叔个图,如下(当然大叔不是这么弄的,不过效果类似): [![fixed-block](h
标题比较让人费解,大概效果就是现在越来越多的看到网站里添加的随页面滚动的模块。比如我这里的头部就是,当然有时候,效果会更好一些,比如一般时候固定在某处,页面滚动使这个元素滚出显示边界之后,为了方便读者(或者展示广告),就把这个模块变成随页面滚动的。测试了一下效果还不错(当然IE6去死)。 很久没写过代码分享文章了。这里先说一下方法:获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚
标题比较让人费解,大概效果就是现在越来越多的看到网站里添加的随页面滚动的模块。比如我这里的头部就是,当然有时候,效果会更好一些,比如一般时候固定在某处,页面滚动使这个元素滚出显示边界之后,为了方便读者(或者展示广告),就把这个模块变成随页面滚动的。测试了一下效果还不错(当然IE6去死)。 很久没写过代码分享文章了。这里先说一下方法:获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚
用jquery设定始终显示(随页面滚动)的元素
Max

标题比较让人费解,大概效果就是现在越来越多的看到网站里添加的随页面滚动的模块。比如我这里的头部就是,当然有时候,效果会更好一些,比如一般时候固定在某处,页面滚动使这个元素滚出显示边界之后,为了方便读者(或者展示广告),就把这个模块变成随页面滚动的。测试了一下效果还不错(当然IE6去死)。

很久没写过代码分享文章了。这里先说一下方法:获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。这里借 zww 大叔个图,如下(当然大叔不是这么弄的,不过效果类似):

fixed-block

下面是代码。

var scroller_anchor = jQuery(".scroller").offset().top; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') != 'fixed') { jQuery('.scroller').css({ 'position': 'fixed', 'margin-top': '0' }); } else if (jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') != 'relative') { jQuery(".scroller").css({ 'margin-top': '10px', 'position': 'relative' }); } });

但是,有时候这样的方式会有问题,比如元素A上面有动态增长(缩短)的元素(比如突然js写入了一个东东),这样第一次获取的高度就不再合适。这样就需要设定一个锚点(这里设定为class id为scroller_anchor的div元素)(经zww大叔提醒将class改为ID)。代码如下:

jQuery(window).scroll(function() { if(jQuery("#content").find("#scroller_anchor").length > 0){ var scroller_anchor = jQuery("#scroller_anchor").offset().top; if (jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') != 'fixed') { jQuery('.scroller').css({ 'position': 'fixed', 'margin-top': '0' }); jQuery("#scroller_anchor").css('height', '36px'); } else if (jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') != 'relative') { jQuery("#scroller_anchor").css('height', '0px'); jQuery(".scroller").css({ 'margin-top': '10px', 'position': 'relative' }); } } });

上面用到的完整的html代码如下:

	......

至于具体的css,请自己根据需要设定吧。

Comments