jquery滚动到导航后悬浮停止页面顶部 兼容ie6

jquery实现方法

 代码如下 复制代码

<script type="text/javascript">
$(function(){

if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
var handler,sTop,dTop;
    dTop = $("#fixedNav").offset().top
    $(window).bind('scroll',function(){
        window.clearTimeout(handler);
        handler = window.setTimeout(function(){
            sTop = $(document).scrollTop();
            sTop > dTop ? $("#fixedNav").css("top",sTop - dTop) : $("#fixedNav").css("top",0);
     $("#fixedNav").css({"position":"relative","z-index":"1200"});
        },60);
    });
}else{

 var topMain= $("#fixedNav").offset().top
 $(window).scroll(function(){
  if ($(window).scrollTop()>topMain){
   $("#fixedNav").addClass("nav_scroll");
  }else{
   $("#fixedNav").removeClass("nav_scroll");
  }
 });

 }
});
</script>

css代码

 代码如下 复制代码

.nav_scroll{ position:fixed;top:0;left:0;z-index:1200; width:100%;}

html

 代码如下 复制代码

<div id=fixedNav>jquery实现滚动到导航后悬浮停止页面顶部 兼容ie6,这里面放内容</div>

下面附一段js代码

 

 代码如下 复制代码

<script type="text/javascript">
function htmlScroll()
{
 var top = document.body.scrollTop ||  document.documentElement.scrollTop;
 if(elFix.data_top < top)
 {
  elFix.style.position = 'fixed';
  elFix.style.top = 0;
  elFix.style.left = elFix.data_left;
 }
 else
 {
  elFix.style.position = 'static';
 }
}

function htmlPosition(obj)
{
 var o = obj;
 var t = o.offsetTop;
 var l = o.offsetLeft;
 while(o = o.offsetParent)
 {
  t += o.offsetTop;
  l += o.offsetLeft;
 }
 obj.data_top = t;
 obj.data_left = l;
}

var oldHtmlWidth = document.documentElement.offsetWidth;
window.onresize = function(){
 var newHtmlWidth = document.documentElement.offsetWidth;
 if(oldHtmlWidth == newHtmlWidth)
 {
  return;
 }
 oldHtmlWidth = newHtmlWidth;
 elFix.style.position = 'static';
 htmlPosition(elFix);
 htmlScroll();
}
window.onscroll = htmlScroll;

var elFix = document.getElementById('fixedRight');
htmlPosition(elFix);

</script>

时间: 2024-09-28 19:43:22

jquery滚动到导航后悬浮停止页面顶部 兼容ie6的相关文章

jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)_jquery

大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案.你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符号来跳过页面.这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答的形式经常采用这样的效果,然而页面跳转对于游客来说有时候并不是好友好,因为他一点击直接跳转,陌生的游客对此可能感到困惑,不知道当前的数据跑那里去了, 在本教程中,我将探讨一个解决方案,创建一个简单的页面索引,并采用锚点链接在页面上."跳转"动作进行动画处理,向

JS返回页面顶部实现程序代码

方法一,纯css实现方法 页面顶部放置:  代码如下 复制代码 <a name="top" id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可. 页面底部放置:  代码如下 复制代码 <a href="#top" target="_self">返回顶部</a> 方法二,js带css实现方法 本方式是渐进式返回顶部,要好看一

jquery实现鼠标悬浮停止轮播特效_jquery

本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet&

jQuery实现带滚动线条导航效果的方法_jquery

本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册     CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80

jquery绑定click事件后执行单击以后,刷新页面会执行单击事件是什么原因?

问题描述 jquery绑定click事件后执行单击以后,刷新页面会执行单击事件是什么原因? $().ready(function () { $(".sysicon1:first").click(function () { $("#Btn").click(); }); }); 这段代码,页面加载没有执行#Btn的单击事件,当我点击一次#Btn后,正常执行了单击事件,但是我刷新本页面时又执行了一次单击事件,这是为什么呢? 我是想实现记录一个链接被点击时的时间和点击者的i

javascript-求大神教jQuery中跳转到一个新页面后如何获取前一个页面的地址

问题描述 求大神教jQuery中跳转到一个新页面后如何获取前一个页面的地址 求大神教jQuery中跳转到一个新页面后如何获取前一个页面的地址!!!!!! 解决方案 alert(document.referer) 解决方案二: http://www.51-n.com/t-4016-1-1.html 解决方案三: 直接拼在url 后面.跳转到下一个的时候带着上一个的url 解决方案四: 你可以在上一个页面跳转的时候把地址当作参数传递过去. 解决方案五: 地址?变量="要传的地址" 解决方案

jquery 点击元素后,滚动条滚动至该元素位置的方法_jquery

点击元素后,滚动条滚动至该元素位置: $('a.lead-link').bind('click', function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top - 60 }, 1500); }); 以上这篇jquery 点击元素后,滚动条滚动至该元素位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——第9章 使用jQuery Mobile来导航页面 9.1技巧:搭建jQuery Mobile基础页面

第9章 使用jQuery Mobile来导航页面 本章介绍jQuery Mobile的基础知识,讲述了使用该框架来搭建页面,导航至其他页面,使用AJAX请求加载内容,以及提供平滑的过渡动画.在页面中,有确定的基础元素(如header1.footer),它们的行为会根据指定的选项而有所不同.这里的"页面搭建,组合基础元素(如column).事件以及最少量的自定义JavaScript代码"是使用jQuery Mobile的基本要素. 9.1 技巧:搭建jQuery Mobile基础页面 j

用jQuery建一个按字母顺序排列的页面索引

大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案.你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符 号来跳过页面.这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答的形式经常采用这样的效果,然而页面跳转对于游客来说有 时候并不是好友好,因为他一点击直接跳转,陌生的游客对此可能感到困惑,不知道当前的数据跑那里去了. 在本教程中,我将探讨一个解决方案,创建一个简单的页面索引,并采用锚点链接在页面上."跳转"动作进行动画处理