jquery - 使标签位置固定在滚动上

Question

我喜欢这个网站标签的想法： http ://www.usatoday.com/

在徽标下方滚动时，1- 选项卡得到固定。2- 一个较小的徽标进入选项卡。

或者，您可以说，类似于 Google plus 标签。我该怎么做.. * 我是数据库开发人员，只有网络技术背景。

感谢帮助。问候，

Answer 1

在桌面上这应该不难：

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 中的其余内容分开，因为主体不会响应，因为人们可能会认为滚动事件。

使用这种方法时，您需要将滚动事件绑定到内容 div

<div id="header">
    //Your header code, including the navigation
</div>
<div id="main-content-wrapper">
    //Everything else
</div>

CSS：

#main-content-wrapper {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; //Enables inertia scroll on webkit mobile browsers
}

我希望我有所帮助:)