免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: JQ页面滚动指定位置，给导航定位CSS样式锚点 [打印本页]

---

作者: admin    时间: 2020-9-18 15:23
标题: JQ页面滚动指定位置，给导航定位CSS样式锚点


用一个很简单的方法写的，方便 大家看到原理，能看懂是怎么实现的。
可以利用这个思路来封装JS

1. $(document).ready(function (){
   
2.   $(document).scroll(function (){
   
3.     var res = $(this).scrollTop();
   
4.     if(res >= 100){   //页面滚动到100PX给导航加上背景颜色
   
5.       $(".shophead").css({ "background": "#f4f4f4" });
   
6.     }else{
   
7.       $(".shophead").css({ "background": "none" });
   
8.     }
   
9. 
   
10.     var top_a = $("#a").offset().top; //获取指定位置的数值
    
11.     var top_b = $("#b").offset().top; //获取指定位置的数值
    
12.     var top_c = $("#c").offset().top; //获取指定位置的数值
    
13.     var top_d = $("#d").offset().top; //获取指定位置的数值
    
14. 
    
15.     var scrollTop = $(window).scrollTop();  //获取当前滑动位置
    
16.     if(scrollTop > top_a){ //当页面滚动到达此位置数值时 增加CSS样式。
    
17.             $(".kynavlist a").removeClass("on");
    
18.         $(".kynavlist").addClass("kynavlist1");
    
19.         $("#aa").addClass("on");
    
20.     }
    
21.     if(scrollTop > top_b){
    
22.             $(".kynavlist a").removeClass("on");
    
23.         $("#bb").addClass("on");
    
24.     }
    
25.     if(scrollTop > top_c){
    
26.             $(".kynavlist a").removeClass("on");
    
27.         $("#cc").addClass("on");
    
28.     }
    
29.     if(scrollTop > top_d){
    
30.             $(".kynavlist a").removeClass("on");
    
31.         $("#dd").addClass("on");
    
32.     }
    
33. 
    
34.     if(scrollTop < 300){
    
35.         $(".kynavlist").removeClass("kynavlist1");
    
36.     }
    
37. 
    
38.   })
    
39. });

复制代码

---

欢迎光临 免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (https://www.ourphp.net/club/)

Powered by Discuz! X3.2