关于淘宝浮动导航如何实现的

计算滚动条的scrolltop值是否大于等于浮动导航的top值；接下来就是css控制浮动效果了

jQuery(function($){
var floata = $(".floats");
var topa = floata.offset.top;
$("body").scroll(function(e) {
console.log(this.scrollTop);
console.log(topa);
floata[this.scrollTop > topa ? "addClass":"removeClass"]("fixedfloat");
});
});

http://www.yuyan8.cn/pos1/index.html 看这个页面导航那一块根本不动什么原因呢

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
    <style type="text/css">
    .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
    .header{height:150px;}
    #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
    a{display:inline-block;margin:0 10px;*display:inline;;color:white;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header"></div>
        <div id="nav">
            <a href="#">11111</a>
            <a href="#">22222</a>
            <a href="#">33333</a>
            <a href="#">44444</a>
            <a href="#">55555</a>
        </div>
    </div>
    <script type="text/javascript">
    function menuFixed(id){
    var obj = document.getElementById(id);
    var _getHeight = obj.offsetTop;

    window.onscroll = function(){
        changePos(id,_getHeight);
    }
}
function changePos(id,height){
    var obj = document.getElementById(id);
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(scrollTop < height){
        obj.style.position = 'static';
    }else{
        obj.style.position = 'absolute';
        obj.style.top = scrollTop + 'px';
    }
}
window.onload = function(){
    menuFixed('nav');
}
    </script>
</body>
</html>

计算滚动条的scrolltop值是否大于等于浮动导航的top值；如果大于fix到顶部，IE6下就absolute计算距离，会产品震动

unction liveTop(el){
    var obj = $(el);
var first = obj.offset();
var parent = obj.parent();
mask = false;
$(window).bind('scroll',function(){
var pos = $('.box').length?$('.box').offset():obj.offset();
var top = pos.top,left = pos.left;
var scrtop = $(window).scrollTop();
if(true){
    if(scrtop > first.top) {
    if(!mask){
            mask = true;
    var clone = obj.clone(true,true);
            clone.css({
        top:0,
    left:first.left
        }).appendTo('body').addClass('box');
obj.data('clone',clone);
}
if($.browser.msie && $.browser.version == "6.0" && !$.support.style){
            obj.data('clone').css({
            top:scrtop
        });
}
    } else if (mask){
obj.data('clone').remove();
mask = false;
    }
}

});
}调用函数
liveTop('#id');

最前面少copy了一个f，自己加上

http://www.yuyan8.cn/pos1/index.html 看这个页面导航那一块根本不动什么原因呢style="position:fixed; top:10px; left:10px;"

我也碰到了这个问题，引用了上面的两个例子效果都不怎么好，第一个因为是给他真加坐标所以会闪烁，第二个例子我这边好像出错了，我自己修改的代码给你贴上，还是有缺陷，<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style type="text/css">
    .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
    .header{height:150px;}
    #nav{padding:10px;position:relative;top:400px;background:black;width:1000px;}
    a{display:inline-block;margin:0 10px;*display:inline;color:white;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header"></div>
        <div id="nav">
            <a href="#">11111</a>
            <a href="#">22222</a>
            <a href="#">33333</a>
            <a href="#">44444</a>
            <a href="#">55555</a>
        </div>
    </div>
    <script type="text/javascript">
    function menuFixed(id){
    var obj = document.getElementById(id);


    window.onscroll = function () {
        var _getHeight = obj.offsetTop - document.body.scrollTop;
        changePos(id,_getHeight);
    }
}
    function changePos(id, height) {
        var obj = document.getElementById(id);        if (height <= 0) {
            obj.style.position = 'fixed';
            obj.style.top = '0px';
        }

        if (document.body.scrollTop <=399) {
            obj.style.position = 'relative';
            obj.style.top = '400px';
        }
    }window.onload = function () {

    menuFixed('nav');
}
    </script>
</body>
</html>

jQuery(function($){
$(window).scroll(function() {
var floata = $("div");
var topa =274;
floata[$(document).scrollTop()> topa ? "addClass":"removeClass"]("fixedfloat");
});

}); fixedfloat是一个加上position:fixed的类完美运行

调试易

关于淘宝浮动导航如何实现的

解决方案 »