zoukankan      html  css  js  c++  java
  • div随页面滚动遇顶固定的两种方法

     

    一、遇顶固定的例子

    我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图:
    div随屏幕滚动遇顶固定例子1

    而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图:
    div随屏幕滚动遇顶固定例子2

    类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏幕浏览最新微博时,工具条也会出现这个效果,如下图:
    div随页面滚动遇顶固定的例子3

    这个效果看上去方便,贴心,也许还带推动广告的促销呢。原理其实很简单,本文展示两种方法。

    二、智能浮动效果的实现原理

    它分两种状态,一是默认状态,二是浮动固顶状态。

    默认状态就是默认状态,什么也不用做,保持原有的CSS就好。无论有没有对它做定位,做了absolute也好,没做也好,都行。

    关键是当浏览器屏幕滚动时,该对象div层要移除浏览器界面视区的时候,是要修改它的position属性,让它浮动在窗口的上沿显示就行了。最好的position属性是fixed,可以在IE6+和其他浏览器浮动层平滑的固定定位,由于IE6老大哥不支持fixed属性,所以可以另外赋予它absolute属性。当然也会产生副作用——滚动不平滑。不过也无所谓了,在微软公布不再修补更新XP漏洞,在中国360安全卫士的帮助下虽然大家仍然使用XP,但IE的用户已经是少之又少了。

    那接下来,如何判断当前div层与浏览器窗口的上边缘接触了呢?遇到浏览器顶部了呢?

    当浮动层div与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度是一致的,所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢?

    这里则是使用javaScript库实现。

    三、第一种实现div层智能浮动的方法

    具体代码如下:

    $.fn.smartFloat = function() {
     var position = function(element) {
      var top = element.position().top, pos = element.css("position");
      $(window).scroll(function() {
       var scrolls = $(this).scrollTop();
       if (scrolls > top) {
        if (window.XMLHttpRequest) {
         element.css({
          position: "fixed",
          top: 0
         }); 
        } else {
         element.css({
          top: scrolls
         }); 
        }
       }else {
        element.css({
         position: pos,
         top: top
        }); 
       }
      });
     };
     return $(this).each(function() {
      position($(this));      
     });
    };

    调用其实很简单,将需要浮动的目标层div所设定的id,添加到以下函数代码,如下:

    $("#fixed").smartFloat();

    这样两段代码就可以实现ID为fixed的层有了智能浮动效果,当该层在页面滚动时,与浏览器上边缘接触时就会固定顶部,不再跟随滚动条而滚动了。当滚动回上面时,又会还原成原有状态。当然,别忘记在页面head之前调用jquery库呀。具体代码与压缩包请在文章末尾下载!

    四、第二种实现div层的智能浮动效果办法

    与前面的方法差不多,只是语句更简单一些,当然逻辑上是没有这么严谨吧。

    function scrollLis(){
     var toTop = offs.top-$(window).scrollTop();
     if(toTop==0||toTop<0){
      if(!$('#fixed').hasClass('ab'))$('#fixed').addClass('ab');
     }else{
      $('#fixed').removeClass('ab');
     }
    }

    它的调用就多了几句代码了,同样是放在层的后面,以ID标签fixed为名:

    var offs=$('#fixed').offset();
    $(window).scroll(function(){
     scrollLis();
    });

    以上两种方法我们都在不同的浏览器下测试通过,包括了360安全浏览器、搜狗、火狐、IE6~9、遨游等等。

  • 相关阅读:
    在C#代码中应用Log4Net(二)典型的使用方式
    在C#代码中应用Log4Net(一)简单使用Log4Net
    Windows Azure Active Directory (2) Windows Azure AD基础
    Windows Azure Virtual Network (6) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (1)
    Windows Azure Active Directory (1) 前言
    Azure China (6) SAP 应用在华登陆 Windows Azure 公有云
    Microsoft Azure News(3) Azure新的基本实例上线 (Basic Virtual Machine)
    Microsoft Azure News(2) 在Microsoft Azure上运行SAP应用程序
    Microsoft Azure News(1) 新的数据中心Japan East, Japan West and Brazil South
    Windows Azure HandBook (2) Azure China提供的服务
  • 原文地址:https://www.cnblogs.com/youran/p/15030964.html
Copyright © 2011-2022 走看看