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

寓言130 2013-04-25 09:46:21

它这个是如何实现的可以浮动在浏览器的顶部

...全文

391 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

SummerKs 2013-04-27

打赏
举报

我也碰到了这个问题，引用了上面的两个例子效果都不怎么好，第一个因为是给他真加坐标所以会闪烁，第二个例子我这边好像出错了，我自己修改的代码给你贴上，还是有缺陷，

<!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>

SummerKs 2013-04-27

打赏
举报

你已经实现了嘛？？可以把整个代码贴出来吗？？我这边用了你的代码还是不行额可能没写好哈哈谢谢。。。

寓言130 2013-04-27

打赏
举报

引用 13 楼 wangxia19930701 的回复:

我也碰到了这个问题，引用了上面的两个例子效果都不怎么好，第一个因为是给他真加坐标所以会闪烁，第二个例子我这边好像出错了，我自己修改的代码给你贴上，还是有缺陷，

jQuery(function($){ $(window).scroll(function() { var floata = $("div"); var topa =274; floata[$(document).scrollTop()> topa ? "addClass":"removeClass"]("fixedfloat"); }); }); fixedfloat是一个加上position:fixed的类完美运行

zhiaiyahong 2013-04-26

打赏
举报

引用 3 楼 zhoutanjue 的回复:

[quote=引用 1 楼 march99999 的回复:] 计算滚动条的scrolltop值是否大于等于浮动导航的top值；接下来就是css控制浮动效果了

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

march99999 2013-04-25

打赏
举报

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

未知数 2013-04-25

打赏
举报

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

未知数 2013-04-25

打赏
举报

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');

mmyiyi520 2013-04-25

打赏
举报

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

一天要饭生活又开始啦 2013-04-25

打赏
举报

仅做参考。。。。。。。。。。。。。。

一天要饭生活又开始啦 2013-04-25

打赏
举报

<!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>

march99999 2013-04-25

打赏
举报

引用 4 楼 march99999 的回复:

JavaScript code?12345678910var floata = $(".floats");var topa = floata.offset.top;$$(window).bind('scroll',function(){ var scrollTopValue = jQuery(window).scrollTop(); ……

改了下

march99999 2013-04-25

打赏
举报


var floata = $(".floats");
var topa = floata.offsetTop;
$$(window).bind('scroll',function(){ 
			var scrollTopValue = jQuery(window).scrollTop();
			if(j_scrollTop >= topa){
				//something
			}else if(j_scrollTop < topa){
				//something
			}
		});

寓言130 2013-04-25

打赏
举报

引用 1 楼 march99999 的回复:

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

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

寓言130 2013-04-25

打赏
举报

引用 1 楼 march99999 的回复:

计算滚动条的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"); }); });