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

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. }

 

 

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/cnchenjunbiao/p/4499898.html