吸顶盒效果

最新推荐文章于 2024-04-14 02:07:49 发布

原创最新推荐文章于 2024-04-14 02:07:49 发布 · 679 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery特效 #滚动事件

本文介绍了一个简单的电商吸顶盒特效的实现过程，包括网页结构设计、页面布局和使用jQuery进行效果实现。适合想要了解jQuery特效制作的读者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天更新一个简单,很简单,超级简单的特效--电商吸顶盒特效,hiahiahia~

1,来个简单的网页结构

<div class="head">
<!--//为了简化布局,头部是用一张图片代替的-->
    <img src="images/1.JPG" alt=""/>
</div>
<ul class="nav">
    <li><a href="javascript:;">首页</a></li>
    <li><a href="javascript:;">最新</a></li>
    <li><a href="javascript:;">上衣</a></li>
    <li><a href="javascript:;)">裙子</a></li>
    <li><a href="javascript:;">裤子</a></li>
    <li><a href="javascript:;">包包</a></li>
    <li><a href="javascript:;">服饰</a></li>
    <li><a href="javascript:;">更多</a></li>
    <li><a href="javascript:;">鞋子</a></li>
    <li class="bold"><a href="javascript:;">明星同款</a></li>
    <li class="bold"><a href="javascript:;">中国馆</a></li>
    <li class="bold"><a href="javascript:;">团购</a></li>
    <li class="bold"><a href="javascript:;">Hi范儿</a></li>
    <li class="bold"><a href="javascript:;">福利社</a></li>
</ul>
<!--为了让网页有足够的长度可以向下滚动,实现吸顶效果,简单加一个高度较高的div-->
<div class="content">content</div>

2,简单布局下咯

<style>
        *{
            padding:0;
            margin:0;
        }
        body{
            /*表示文字和行高是1:1的关系*/
            line-height:1;
        }
        ul{
            list-style:none;
        }
        .head,.nav{
            width:1500px;
            margin:0 auto;
        }
        img{
            vertical-align: middle;
        }
        .nav{
            height:50px;
            background-color:#fff;
            border-bottom:1px solid deeppink;
        }
        .nav>li{
            float:left;
            padding:17px 20px;
            text-align:center;
        }
        .nav>li a{
            text-decoration: none;
            color:#000;
        }
        .nav>li.bold a{
            font-weight:bold;
            color:#ff0036;
        }
        .nav.topFixed{
            position:fixed;
            top:0;
            left:50%;
            margin-left:-750px;
        }
        .content{
            width:100%;
            height:2000px;
            line-height: 2000px;
            font-size:500px;
        }
    </style>

4,最后用jQuery实现效果!

当然,小可爱别忘记先引入jQuery文件哦

<script>
//    求出导航与浏览器顶部的距离
    var topValue=$(".nav").offset().top;
//console.log(topValue);
    $(window).scroll(function(){
        if($(window).scrollTop()>topValue){
            $(".nav").addClass("topFixed");
        }else{
            $(".nav").removeClass("topFixed");
        }
    })
</script>

如有问题请提出,谢谢~