jquery实现当滑动到一定位置时固定效果

代码如下:

<script type="text/javascript">
$.fn.silde = function() {
var position = function(element) {
var top = element.position().top, pos = element.css
("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0,
left:1080,
"margin-left":"0px",

});
} else {
element.css({
top: scrolls,
"margin-left":"20px"
});
}
}else {
element.css({
position: pos,
top: top,
"margin-left":"20px"
});
}
});
};
return $(this).each(function() {
position($(this));

});
};
$("#ding").silde();
</script>

赞 (0)

相关推荐

  • jQuery固定浮动侧边栏实现思路及代码

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu

  • jquery任意位置浮动固定层插件用法实例

    本文实例讲述了jquery任意位置浮动固定层插件用法.分享给大家供大家参考.具体分析如下: 说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动 2009-06-10修改:重新修改插件实现固定浮动层的方式,使用一个大固定层来定位   2009-07-16修改:修正IE6下无法固定在top上的问题 09-11-5修改:当自定义层的绝对位置时,加上top为空值时的判断   这次的方法偷自天涯新版页   经多次测试,基本上没bug~ 调用: 1 无参数调用:默

  • Jquery实现侧边栏跟随滚动条固定（兼容IE6）

    部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop

  • jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

    jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

    本文实例讲述了jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换).分享给大家供大家参考,具体如下: 这里介绍的jQuery拉动页面固定顶部显示,及自动消失效果,可能ie浏览器下有问题,不过火狐什么的都可以运行看效果,一个简单的网页特效,也是很常用的"回到顶部"效果,有兴趣的看一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fix-top-cha-show-codes/ 具体代码如下: <!DOC

  • jQuery实现固定在网页顶部的菜单效果代码

    jQuery实现固定在网页顶部的菜单效果代码

    本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的固定在页面顶部的菜单,获取要定位元素距离浏览器顶部的距离,滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-top-fixed-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • jQuery实现仿百度帖吧头部固定导航效果

    jQuery实现仿百度帖吧头部固定导航效果

    本文实例讲述了jQuery实现仿百度帖吧头部固定导航效果.分享给大家供大家参考.具体如下: 这里使用jquery实现网页上的头部固定,但不随滚动条滚动的效果,在百度贴吧里整理出来的网页特效,最开始的时候,固定条可以随滚动条拖动至网页顶部,但到达网页顶部后,再次拖动滚动条,头部并不滚动,其它的内容可以滚动,貌似在网上见的挺多的效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&

  • jquery实现的导航固定效果

    jquery实现的导航固定效果 复制代码 代码如下: 1.jquery代码, .nav为导航的class$(function(){   $(window).scroll(function() { if($(window).scrollTop()>=250){  $(".nav").addClass("fixedNav"); }else{  $(".nav").removeClass("fixedNav"); }   })

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

    jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

      复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

  • jQuery固定元素插件scrolltofixed使用指南

    jQuery固定元素插件scrolltofixed使用指南

    这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下. 一.scrolltofixed插件功能 固定某个元素的位置,在页面滚动时,元素仍然显示. 二.scrolltofixed官方地址 https://github.com/bigspotteddog/ScrollToFixed.在官方地址上有使用说明,在下面有插件的属性方法说明.demo中也有详细的

  • jquery实现导航固定顶部的效果仿蘑菇街

    jquery实现导航固定顶部的效果,仿蘑菇街的,感觉还不错,需要的朋友可以参考下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

随机推荐