仿京东商城中商品介绍动态悬浮栏

最新推荐文章于 2023-11-13 15:41:27 发布

bladeblue

最新推荐文章于 2023-11-13 15:41:27 发布

阅读量1.8k

点赞数

分类专栏： Asp.net

本文链接：https://blog.csdn.net/bladeblue/article/details/8186778

版权

Asp.net 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

360buy上,在商品详情页面中,有一个导航栏,当滚动到最顶部是,该栏就固定在最顶部.用起来挺方便的,想看其他内容时,不用再翻到最顶端.

觉得很好玩就弄了个模型出来.
代码很简单:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>仿京东商品介绍动态悬浮栏</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #float
        {
            width: 600px;
            height: 32px;
            border: 1px solid Green;
            top: 0px;
            background-color:Red;
        }
        #content
        {
            height: 640px;
            width: 600px;
            
        }
    </style>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type ="text/javascript" >
        $(function() {
            var offsetTop = $("#float").offset().top;
            $(window).scroll(function() {
                //alert(offsetTop);
                var scrollTop = document.documentElement.scrollTop;
                if (scrollTop > offsetTop){
                    $("#float").css("position","fixed");
                }
                else{
                    $("#float").css("position", "static");
                }
            });
        })
    </script>
</head>
<body>
    
    <div id="content">
    <div style="height: 250px; background-color:Gray">
    </div>
        <div id="float">
        </div>
        <div style="height: 9999px;  background-color:Gray">
    </div>
    </div>
    
</body>
</html>

bladeblue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
仿京东商城中商品介绍动态悬浮栏

360buy上,在商品详情页面中,有一个导航栏,当滚动到最顶部是,该栏就固定在最顶部.用起来挺方便的,想看其他内容时,不用再翻到最顶端. 觉得很好玩就弄了个模型出来. 代码很简单: 仿京东商品介绍动态悬浮栏 #float { width: 600px;
复制链接

扫一扫