Jquery 使选项卡位置固定在滚动上
我喜欢这个网站标签的想法: 当滚动到徽标下方时, 1-选项卡得到修复。 2-标签上有一个较小的徽标 或者,你可以说,类似于GooglePlus标签的东西。 我该怎么做。。 *我是一名数据库开发人员,只有网络技术背景 谢谢你的帮助。Jquery 使选项卡位置固定在滚动上,jquery,html,css,Jquery,Html,Css,我喜欢这个网站标签的想法: 当滚动到徽标下方时, 1-选项卡得到修复。 2-标签上有一个较小的徽标 或者,你可以说,类似于GooglePlus标签的东西。 我该怎么做。。 *我是一名数据库开发人员,只有网络技术背景 谢谢你的帮助。 在桌面上,这应该不难做到: var navigationIsFixed = false; var $navigation = $("#navigation"); var headerHeight = $("#my-header").height() //To fin
在桌面上,这应该不难做到:
var navigationIsFixed = false;
var $navigation = $("#navigation");
var headerHeight = $("#my-header").height() //To find the height of the header element
$("body").on('scroll', function(e)) { //Fires continuously while the user scrolls
if ($("body").scrollTop >= headerHeight && !navigationIsFixed) {
$navigation.css({
position: "fixed",
left: 0,
right: 0,
top: 0
});
$("#logo").stop(); //Make sure to stop any possible ongoing animations
$("#logo").doCoolAnimation();
navigationIsFixed = true;
} else if (navigationIsFixed) {
$navigation.css( {position: "static"} );
$("#logo").stop();
$("#logo").doCoolRevertAnimation();
navigationIsFixed = false;
}
}
在移动设备上,这是一个很小的字节。您必须在两个不同的div中将标题与其余内容分开,因为主体不会像人们可能认为的那样响应滚动事件
使用这种方法时,您需要将滚动事件绑定到contentdiv
<div id="header">
//Your header code, including the navigation
</div>
<div id="main-content-wrapper">
//Everything else
</div>
我希望我能帮忙:)
#main-content-wrapper {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; //Enables inertia scroll on webkit mobile browsers
}