html网页顶端工具固定问题css

如图所示、第一张图片的工具栏在滚动条没有拉下去的时候是在那个地方、当滚动条移到比较下面的时候、自动在顶端固定了工具栏、请问大侠这是怎么做到的、最好给代码、

第1个回答  2013-09-03
$.fn.smartFloat = function() {
var position = function(element) {
var top1 = document.body.scrollHeight;
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};

$(function(){

//绑定
$("#float").smartFloat();
});
第2个回答  推荐于2017-12-27
说一个思路,整体代码太繁琐没有现成的东西;
基本思路JS判断全部广播这一行距离顶部的距离距离大于0就是不变的距离小于等于0的时候给固定定位。本回答被网友采纳
第3个回答  2013-09-03
js+css实现,工具栏的css的position要设定为fixed,并且其index为页面最大。然后,就是用js控制滚动条事件,将工具栏一直放到窗口顶端。本回答被网友采纳
第4个回答  2013-09-03
css,position:fixed;top:0px;如果需要在一定高度才跟随滚动需要js
相似回答