JQ 浮层导航并在最顶部跟随滚动条滚动有效方法

说明: 
offset (抵消、合并) 

offsetTop:合并后的高度 
scrollTop:已滚动过去的高度 
scrollHeight:滚动显示区的高度 

附练习 (作品来源于 alleyloft 博客   保留版权)
  1. <script type="text/javascript">
  2. $(function(){
  3. $(window).scroll(function(){
  4. $offset = $('.placeholder').offset();//不能用自身的div,不然滚动起来会很卡
  5. if($(window).scrollTop()>$offset.top){ //如已滚动过去的高度 大于合并后的高度
  6. $('.nav').css({'position':'fixed','top':'0px','left':$offset.left+'px','z-index':'999'});
  7. $(".con").css({"margin-top":"36px"});
  8. }else{
  9. $('.nav').removeAttr('style'); // 删除掉nav 的属性
  10. $('.con').removeAttr('style');
  11. }
  12. });
  13. })
  14. </script>
附加说明(更新与2016/5/6):
有些低端页面代码可能会在某些浏览器影响实际效果 或者根本没有效果 比如IE
经过研究发现是因为这个  特别提醒注意  一下是ASP网页判断浏览器类型
  1. <%
  2. Dim BrowserString
  3. BrowserString = Request.ServerVariables("HTTP_USER_AGENT")
  4. BrowserString = Lcase(BrowserString)
  5. Dim broFirefox,broMSIE,broOpera,broWap
  6. broFirefox = "firefox"
  7. broMSIE = "msie"
  8. broOpera = "opera"
  9. '如果是Firefox
  10. if Instr(BrowserString, broFirefox) <> 0 then
  11. response.write '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'
  12. end if
  13. '如果是MSIE
  14. if Instr(BrowserString, broMSIE) <> 0 then
  15. response.write "<!DOCTYPE html>"
  16. end if
  17. '如果是Opera
  18. if Instr(BrowserString, broOpera) <> 0 then
  19. response.write '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'
  20. end if
  21. %>
全部实例下载见附件:
自己解压后就可以看到演示地址了  支持IE 但不支持6以下的淘汰货 欢迎抵制。

 

非凡网 博客

我只是帮你筛选价值。

你也许喜欢

发表评论