js实现页面滚动，菜单固定

相信大家都遇到过滚动页面需要固定某些内容不跟随页面滚动而滚动的情况，以往项目中也比较多，一直没有分享，今天刚好有空，来做个小分享。

项目需求：

页面处于顶部时右侧“在线客服”静止不动

当页面往下滚动，右侧在线客服悬浮于顶部

页面滚动至最大高度时，右侧在线客服与左侧内容底部对齐，相对静止

思路：
页面处于顶部时只需右浮动即可，滚动超过本身高度时设置fixed使元素块可以固定悬浮于浏览器窗口顶部，当滚动至左侧内容最大高度时设置absolute使相对左侧内容静止

好了，我们看看具体代码吧。
HTML

<div class="proinfo clearfix"><div class="infoDelita">......</div><div class="slidebar"><div class="service"><div class="ti">——  咨询在线客服  ——</div>......</div></div>
</div>

CSS

.products .proinfo{ margin-top:30px; position:relative;}
.proinfo .infoDelita{ width:900px; float:left;}
.proinfo .slidebar{ width:295px; float:right;}.proinfo .service{ width:275px; background-color:#fff; padding:25px 0 38px 20px;}
.proinfo .service .ti{ text-align:center; color:#333; font-size:18px;}
.........
/*在线客服相对固定设置*/
.proinfo .SerFix{ position:fixed; top:0; z-index:100;}
.proinfo .SerAbs{ position:absolute; bottom:0;}

var fdiv = $(".proinfo .service");
var itop = fdiv.offset().top;window.onload = function(){$(window).scroll( function() {var top = $(window).scrollTop();if(top >= itop){fdiv.addClass("SerFix");if(top >= $(".products .MayaLike").offset().top - 40 - $(window).height()){fdiv.removeClass("SerFix").addClass("SerAbs");} else{fdiv.removeClass("SerAbs");}} else{fdiv.removeClass("SerFix");}});
}

tips：
$(“.products .MayaLike”).offset().top - 40 是左侧内容下面的内容的相对高度。如下图所示：

js实现页面滚动，菜单固定相关推荐

html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
页面滚动头部固定背景色显现
页面滚动头部固定背景色显现效果图未滚动前滚动后结构代码: <div class="top" id="topdiv" :class="i ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
jq实现页面滚动thead固定在顶部，仅tbody滚动
jq实现页面滚动thead固定在顶部,仅tbody滚动监听页面滚动 $(window).scroll(function () 获取窗口滚动高度 $(window).scrollTop() 总体思路: ...
动态效果html wow,WOW.js ? 在页面滚动时展现动感的元素动画效果_html/css_WEB-ITnose...
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...
js控制页面滚动到指定位置，js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
你也可以做一个小米魅族网站 WOW js WOW js – 在页面滚动时展现动感的元素动画效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 可视区域 ...
你也可以做一个小米魅族网站（WOW.js：WOW.js – 在页面滚动时展现动感的元素动画效果）
可视区域动画: aos.js :http://www.jq22.com/jquery-info8150 scrollReveal.js :http://to ...

js实现页面滚动，菜单固定

js实现页面滚动，菜单固定相关推荐

最新文章

热门文章