码迷,mamicode.com
首页 > 其他好文 > 详细

滚动条滚动至一定高定执行position:fixed

时间:2015-05-13 12:16:40      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

  1. // 导航头固定
  2. //top为导航头距离顶部的距离
  3. var top = $(".con_left").position().top;
  4. var top_location = $(".main_location").position().top - 80;
  5. var top_buyNotes = $(".main_buyNotes").position().top - 80;
  6. var top_details = $(".main_details").position().top - 80;
  7. var top_evalua = $(".main_evalua").position().top - 80;
  8. $(window).scroll(function() {
  9. if ($(window).scrollTop() > top) {
  10. $(".con_head").addClass("con_head_fixed");
  11. } else {
  12. $(".con_head").removeClass("con_head_fixed");
  13. }
  14. });
  15. $(window).scroll(function() {
  16. if ($(window).scrollTop() > top_location && $(window).scrollTop() < top_buyNotes) {
  17. $(".con_head li:nth-child(1)").addClass("active");
  18. } else {
  19. $(".con_head li:nth-child(1)").removeClass("active");
  20. }
  21. });
  22. $(window).scroll(function() {
  23. if ($(window).scrollTop() > top_buyNotes && $(window).scrollTop() < top_details) {
  24. $(".con_head li:nth-child(2)").addClass("active");
  25. } else {
  26. $(".con_head li:nth-child(2)").removeClass("active");
  27. }
  28. });
  29. $(window).scroll(function() {
  30. if ($(window).scrollTop() > top_details && $(window).scrollTop() < top_evalua) {
  31. $(".con_head li:nth-child(3)").addClass("active");
  32. } else {
  33. $(".con_head li:nth-child(3)").removeClass("active");
  34. }
  35. });
  36. $(window).scroll(function() {
  37. if ($(window).scrollTop() > top_evalua) {
  38. $(".con_head li:nth-child(4)").addClass("active");
  39. } else {
  40. $(".con_head li:nth-child(4)").removeClass("active");
  41. }
  42. });
  43. // 点击时跳转到对应的标签位置
  44. $(".con_left li:nth-child(1)").click(function() {
  45. $(window).scrollTop(top_location + 15);
  46. })
  47. $(".con_left li:nth-child(2)").click(function() {
  48. $(window).scrollTop(top_buyNotes + 15);
  49. })
  50. $(".con_left li:nth-child(3)").click(function() {
  51. $(window).scrollTop(top_details + 15);
  52. })
  53. $(".con_left li:nth-child(4)").click(function() {
  54. $(window).scrollTop(top_evalua + 15);
  55. })


  1. .con_head_fixed{
  2. position:fixed;
  3. left:112px;
    *left: 110px;
    left: 110px\0;/*兼容IE8*/
  4. top:0px;
  5. z-index: 999;
  6. }

 




滚动条滚动至一定高定执行position:fixed

标签:

原文地址:http://www.cnblogs.com/cnchenjunbiao/p/4499898.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!