方法一:
使用css
position:fixed;
效果:然后无论你怎么滚动滑轮,它就在那里,不来不去,因为它确实就是一直没有移动;
优点:没有比这个更简单的了
缺点:只能保持fixed的浮动效果,在响应式布局下不适合。
方法二:
1,使用Jquery或JavaScript(此处示例为Jquery)
$(function() {
//获取要定位元素距离浏览器顶部的距离
var navH = $(".blog-sidebar").offset().top;
//滚动条事件
$(window).scroll(function() {
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if (scroH >= navH) {
$(".blog-sidebar").attr("style","margin-top:"+scroH+"px");
}else{
$(".blog-sidebar").attr("style","margin-top:0px");
}
});
});
效果:可以看得到移动效果,一直跟随滑轮;
优点:适合各种响应式和非响应式布局
缺点:没什么明显的缺点,除非你说影响性能,不过那样你就别用javaScript和Jquery了
2,使用Jquery自带的动画效果(在上面的基础上)
if (scroH >= navH) {
$(".blog-sidebar").animate({marginTop:scroH},1000);
}else{
$(".blog-sidebar").animate({marginTop:0},1000);
}
效果:可以看得到移动效果,一直跟随滑轮移动,移动效果较好;
优点:适合各种响应式和非响应式布局,相对上一个来说跟随效果更明显
缺点:比上面的较耗费性能,有时移动较慢(不是设置的时间原因),当页面js较多时,响应较慢
方法三:
在页面上写一个div标签,然后给div加一个自动出现滚动条
overflow-y:auto;
然后body
overflow-y:hidden;
效果:无论怎么滚动,只会移动div标签里的内容,不影响外面的内容;
优点:适合各种响应式和非响应式布局,不耗性能
缺点:如果鼠标没有放在div里面移动会没有效果,不过可以通过给div绑定滚动事件来解决,
中间div的滑动条略微影响美感,当缩小浏览器窗口时,可能遮盖其它部分
方法四:
或许有人绝得方法够多了,其实只有想不到,没有做不到,我这里列举的也不一定完全,仅仅是自己的经验只谈
使用过CSS的基本都用过这个属性
z-index:99999;
但是你有没有想过通过这个属性来达到“菜单跟随”效果,其实到这里就不是跟随了,而是和上面的一样,改变了相对位置。印证了爱因斯坦的“相对论”(嘿嘿)。
方法如下:
1,做两个层,一层放需要移动的内容,一层放不需要移动的菜单,等等。
2,然后菜单层放头部或两边,内容放中间(只是举例,具体根据个人需要)
3,不需要移动的层就隐藏滚动条
overflow-y:hidden;
需要移动的层
overflow-y:auto;//
并且
overflow-y:hidden;//这个是body的,一定要隐藏啊
然后,你懂的,通过窗户看花嘛。需要移动的div宽度
width:100%;
这样就达到滚动条一样在最外面的效果了,也不需要绑定什么事件了。
说起来很复杂,原理很简单,对吧。
效果:无论怎么滚动,只会移动div标签里的内容,不影响外面的内容(同上);
优点:适合各种响应式和非响应式布局,不耗性能
缺点:对CSS布局能力有一定要求。不然缩小放大浏览器有可能会造成遮盖现象。
综上所述,根据自己的需要自行选择吧
转自:https://my.oschina.net/oospace/blog/354510