zoukankan      html  css  js  c++  java
  • div根据滑动页面位置显示

    今天在pc端做了一个页面。表格形式主要是以公司产品价目做的价目单。其中有一个需求导航栏为侧栏展示,根据描点定位方式展示,根据#id定位当前产品

    第二个需求是导航栏在滑动页面到一定的位置时显示,浮动在当前位置。在刚进入页面时不会显示。

    主要代码是在样式里把导航的div设置为display:none;利用position:fixed把导航浮动定位在设计好的位置。

    js控制显示或隐藏导航栏。这里主要利用jquery scroll()方法,触发scroll函数

    <script>

      $(function(){

        $(window).scroll(function{                            //窗口scroll函数

          var top = $(this).scrollTop();                  //声明top  获取当前滑动窗口顶部的距离

          if( top>计算好的数值){                          //判断是否显示

            $(当前要显示的元素).show();

          }else{

            $(当前要显示的元素).hide();

            }

        }) 

      })

    </script>

    非常简单的效果。主要学习了scroll()函数。只是随笔记录。

     

  • 相关阅读:
    LAMP课程(3)
    LAMP课程
    vim文本编辑
    mysql常用语句
    mysql双机互相备份
    Java NIO
    适配器模式
    对象的序列化与反序列化
    字符流
    Java Socket
  • 原文地址:https://www.cnblogs.com/chendahao/p/7875667.html
Copyright © 2011-2022 走看看