首页 > 代码库 > jquery “做页面滚动到某屏时改变状态标题” 所用知识点记录
jquery “做页面滚动到某屏时改变状态标题” 所用知识点记录
浏览器滚动条滚动时触发事件
//浏览器滚动条滚动时触发事件 $(window).scroll(function(){});
浏览器窗口大小改变时触发事件
//浏览器窗口大小改变时触发事件 $(window).resize(function(){});
监听所有锚点链接实现平滑移动
//监听所有锚点链接实现平滑移动 $(‘a[href*=#],area[href*=#]‘).click(function() { if (location.pathname.replace(/^\//, ‘‘) == this.pathname.replace(/^\//, ‘‘) && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $(‘[name=‘ + this.hash.slice(1) + ‘]‘); if ($target.length) { var targetOffset = $target.offset().top; //为提升用户体验,做出算法改进 start var clientHeight = document.body.clientHeight; //浏览器可视高度 targetOffset = targetOffset-(clientHeight/2)+100; //end $(‘html,body‘).stop(true).animate({ scrollTop: targetOffset }, 1000); return false; } } });
获取某元素基于当前浏览器窗口底部的距离
//获取某元素基于当前浏览器窗口底部的距离 function get_element_window_bottom(choose){ if(choose==‘‘) return false; mTop = $(choose)[0].offsetTop; sTop = $(window).scrollTop(); result = mTop - sTop; //增加一个算法提高用户体验度 result = result+parseInt(document.body.clientHeight/2); return result; }
效果实例图
jquery “做页面滚动到某屏时改变状态标题” 所用知识点记录
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。