页面滚动指定高度时添加样式或动画

Posted 罗点点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面滚动指定高度时添加样式或动画相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <title></title>
        
    </head>
    <body>
        <div class="nav" id="menu">
            <ul>
                <li><a href="#first" class="cur">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li><a href="#second">&nbsp;&nbsp;</a></li>
                <li><a href="#third">工作经验</a></li>
                <li><a href="#forth">项目经验</a></li>
                <li><a href="#fifth">&nbsp;&nbsp;</a></li>
            </ul>
        </div>
        <div id="content">
            <div class="first item" id="first">
                <div class="middle">
                    <img src="img/头像.jpg" alt="头像" />
                    <p>生活是一种绵延不绝的渴望,渴望不断上升,变得更伟大而高贵。</p>
                    <div class="myName">
                        <span>我叫王春</span>
                        <span>一名前端工程师</span>
                        <span>[email protected]</span>
                    </div>
                    <div class="goTop">                        
                    </div>
                </div>
            </div>
            <div class="aboutMe item" id="second">
                <div class="middle">
                    <h1>关于我</h1>                    
                    <ul class="clearfix">
                        <li class="fl">
                            <img src="img/ege.gif" alt="年龄">
                            <p></p>                            
                        </li>
                        <li class="fl">
                            <img src="img/college.gif" alt="学历">
                            <p></p>                            
                        </li>
                        <li class="fl">
                            <img src="img/adds.gif" alt="地址">
                            <p></p>                            
                        </li>
                        <li class="fl">
                            <img src="img/sta.gif" alt="状态">
                            <p></p>                            
                        </li>
                    </ul>
                    <div class="skill">
                        <p>两年多的互联网经验,一年全职前端开发</p>
                        <p>熟练运用HTML5与CSS3的前端网页开发技能</p>
                        <p>熟悉javascript交互与ajax后台数据读取</p>
                        <p>会使用bootstrap等前端开发框架快速编写页面</p>
                    </div>
                </div>
            </div>
            <div class="experience item" id="third">
                <div class="comWidth">
                    <h1>工作经验</h1>
                    <div class="company">                    
                        <p>    
                            <strong>公司名称:陕西听讯科技有限公司</strong>
                            <strong>工作时间:2016/6-至今</strong>                            
                        </p>                        
                        <strong>工作职责:</strong>
                        <ul>                    
                            <li>1.根据产品需求,负责Web端HTML+CSS+JS的开发和优化;</li>
                            <li>2.和设计师及后台工程师配合,高效率高质量完成工作,为用户提供更好的视觉操作;</li>
                            <li>3.负责公司产品前端的维护及更新迭代;</li></tr>
                            <li>4.完成自测的过程;</li>
                            <li>5.完成公司领导交办的其它任务</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="products item" id="forth">
                <div class="comWidth">
                    <h1>项目经验</h1>
                    <ul class="clearfix">
                        <li>
                            <h3>项目名称:智慧易购</h3>
                            <img src="img/智慧易购.png"/ alt="智慧易购">
                            <p><strong>项目描述:</strong>一款移动端购买商品的微信公众号</p>
                            <p><strong>主要职责:</strong>页面结构及样式的搭建,测试及部分交互功能</p>
                            <p><a href="#">链接...</a></p>
                        </li>
                        <li>
                            <h3>项目名称:跳出圈圈</h3>
                            <img src="img/jumpout.png"/ alt="跳出圈圈">
                            <p><strong>项目描述:</strong>一款移动端购买商品的手机app</p>
                            <p><strong>主要职责:</strong>页面结构及样式的搭建,测试及部分交互功能</p>
                            <p><a href="#">链接...</a></p>
                        </li>
                        <li>
                            <h3>项目名称:海峡两岸青年创业大赛</h3>
                            <img src="img/young.png"/ alt="青赛">
                            <p><strong>项目描述:</strong>pc端海峡两岸青年创业大赛报名登录,比赛决赛等线上模式</p>
                            <p><strong>主要职责:</strong>页面结构及样式的搭建,测试及部分交互功能</p>
                            <p><a href="#">链接...</a></p>
                        </li>
                        <li>
                            <h3>项目名称:网站首页</h3>
                            <img src="img/网站首页.png"/ alt="慕课网首页">
                            <p><strong>项目描述:</strong>公司官网首页</p>
                            <p><strong>主要职责:</strong>仿照官网,编写网站首页,添加交互功能</p>
                            <p><a href="#">链接...</a></p>
                        </li>
                        <li>
                            <h3>项目名称:电商网站</h3>
                            <img src="img/电商网.png"/ alt="电商网">
                            <p><strong>项目描述:</strong>一款移动端购买商品的微信公众号</p>
                            <p><strong>主要职责:</strong>页面结构及样式的搭建,测试及部分交互功能</p>
                            <p><a href="#">链接...</a></p>
                        </li>
                        <li>
                            <h3>项目名称:bootstrap框架运用</h3>
                            <img src="img/bootstrap.png"/ alt="bootstrap框架运用">
                            <p><strong>项目描述:</strong>bootstrap框架运用</p>
                            <p><strong>主要职责:</strong>使用bootstrap框架制作响应式开发</p>
                            <p><a href="#">链接...</a></p>
                        </li>
                    </ul>
                </div>
            </div>        
            <div class="contact item" id="fifth">
                <div class="middle">
                    <h1>联系我</h1>
                    <p><span class="orange">灵感</span><span class="sky">代码</span><span class="apple">梦想</span><span class="orange2">未来</span></p>
                    <div class="myc">
                        <p>注重效率,偏爱敏捷开发</p>
                        <p>喜欢尝试,期待新鲜事物</p>
                        <p>前端即兴趣,兴趣即未来</p>
                        <p>行路有良友,便是捷径</p>
                        <p>带上我吧,一起看更广阔的代码世界</p>
                    </div>
                    <p class="tel">联系电话:15229074105</p>
                </div>                
            </div>            
        
    <script type="text/javascript">  
            $(document).ready(function(){
                $(window).scroll(function(){
                var top = $(document).scrollTop();          //定义变量,获取滚动条的高度
                var menu = $("#menu");                      //定义变量,抓取#menu
                var items = $("#content").find(".item");    //定义变量,查找.item

                var curId = "";                             //定义变量,当前所在的楼层item #id 

                items.each(function(){
                var m = $(this);                        //定义变量,获取当前类
                var itemsTop = m.offset().top;                      //定义变量,获取当前类的top偏移量
                // console.log("scrollTop : " + top);
                // console.log("offset.top : " + itemsTop);
                if(top > itemsTop-100){
                curId = "#" + m.attr("id");
                }else{
                return false;
                }
                });
        //给相应的楼层设置cur,取消其他楼层的cur
        var curLink = menu.find(".cur");
        if( curId && curLink.attr("href") != curId ){
            curLink.removeClass("cur");
            menu.find( "[href=" + curId + "]" ).addClass("cur");
        }
        // console.log(top);
    });
});
        </script> 
    </body>
</html>

 

以上是关于页面滚动指定高度时添加样式或动画的主要内容,如果未能解决你的问题,请参考以下文章

如何让jquery动画效果在屏幕滚动到指定位置才执行

位置样式为绝对时滚动时的文本框定位问题

html 怎么去掉网页的滚动条

微信小程序:scroll-view滚动组件

vue+定时器实现滚动列表动效

第六堂课 框架和样式表的基础