简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 运用scroll,scrollTop获取滚动值-2019年1月23日
Blogger Information
Blog 15
fans 0
comment 0
visits 10318
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
运用scroll,scrollTop获取滚动值-2019年1月23日
超超的博客
Original
597 people have browsed it

这次我们要实现的是导航栏随着滚动条的滚动消失和出现的效果，通过调用jquery，使用scroll和scrollTop实现相应效果。

一、建立导航栏

 <div class="content">
 我是导航
 </div>
 <!-- 轮播图 -->
 <div class="pic"></div>
 <!-- 页面详情 -->
 <div class="box"></div>

二、调整样式

      *{margin: 0;padding: 0;}
      .content{ width:100%;height:60px;background: rgba(160,3,162,0.1);box-shadow: 1px 3px 7px #ccc;
                line-height: 60px; text-align:center; position: fixed;}
      .content_2{background: rgba(160,3,162,0.4)}
      .pic{width: 100%;height: 580px;background: url(images/3.jpg);margin: 0 auto;}
      .box{width: 100%;height:1200px;background:rgba(108,108,106,0.1);margin: 0 auto; }

三、调用jquery

    $(function(){
      // scroll 事件  当用户滚动指定的元素时触发
     $(window).scroll(function(){
          // 获取浏览器滚动条到顶部的垂直高度 (即网页被卷上去的高度)
        if($(window).scrollTop()>60 && $(window).scrollTop()<580 ){
          $('.content').fadeOut();
        }else{
          $('.content').fadeIn();
        }
         if($(window).scrollTop()>580){
          $('.content').addClass('content_2').fadeIn();
        }else{
          $('.content').removeClass('content_2');
        }

     })


    })

四、下面是完整代码

<!DOCTYPE html>
<html>
<head>
  <title>获取滚动值案例</title>
  <link rel="icon" type="image/x-icon" href="images/2.png"> 
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style type="text/css">
      *{margin: 0;padding: 0;}
      .content{ width:100%;height:60px;background: rgba(160,3,162,0.1);box-shadow: 1px 3px 7px #ccc;
                line-height: 60px; text-align:center; position: fixed;}
      .content_2{background: rgba(160,3,162,0.4)}
      .pic{width: 100%;height: 580px;background: url(images/3.jpg);margin: 0 auto;}
      .box{width: 100%;height:1200px;background:rgba(108,108,106,0.1);margin: 0 auto; }
  </style>

</head>
<body> 
<!-- 顶部导航 -->
 <div class="content">
 我是导航
 </div>
 <!-- 轮播图 -->
 <div class="pic"></div>
 <!-- 页面详情 -->
 <div class="box"></div>
 <script>
    $(function(){
      // scroll 事件  当用户滚动指定的元素时触发
     $(window).scroll(function(){
          // 获取浏览器滚动条到顶部的垂直高度 (即网页被卷上去的高度)
        if($(window).scrollTop()>60){
          $('.content').css('display','none')
        }else{
          $('.content').css('display','block')
        }
         if($(window).scrollTop()>580){
          $('.content').addClass('content_2').css('display','block')
        }else{
          $('.content').removeClass('content_2')
        }

     })


    })
 </script>
</body>
</html>


Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！