JQuery/PHP

jQuery实现滚动到某个位置添加class,滚回某个位置移除class的效果

阿里云

当页面滚动到一个 div 后,通过 js 给这个 div 添加个新的 class。然后当页面从下滚回这个 div 后,移除上一步添加的这个 class。
jQuery实现滚动到某个位置添加class,滚回某个位置移除class的效果
可以看到动图的中间部分,菜单在向下滚动到一定位置后悬浮在了页顶。

同时反过来,当向上移动网页时,到一定位置,顶部悬浮的这个菜单会隐藏,这边就不截图了。

也想出现在这里?联系我们
创客主机

废话不多说,直接上代码:

  1. /*首页中部菜单浮动*/
  2. $(document).ready(function(){
  3.     var wh=$(window).height();
  4.         hw=$('.index_cont .main_cont .nav').height();
  5.     $(window).scroll(function(){
  6.     var s=wh-$(window).scrollTop();
  7.     if(s<hw){
  8.         $('.index_cont .main_cont .nav').addClass('fixed');}
  9.     else{
  10.         $('.index_cont .main_cont .nav').removeClass('fixed');
  11.     }
  12.     });
  13. });

其中 css 样式要自己添加。这段代码不是很规整,而且位置貌似是有点问题的。但是基本上实现了我想要的功能。所以记录下来,以备参考。

jQuery 实现滚动到某个位置添加 class,滚回某个位置移除 class 的效果

已有 48 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!